Комбинация селекторов: first-child и #id в :not() не работает


Комбинация селекторов: first-child и #id в :not() не работает

10.08.2015 04:17:26 Просмотров 121 Источник

У меня возникли проблемы с :не() селектор CSS. Я проверяю уже на stackoverflow, но ничего не работает. Проблема заключается в том, когда я объединяю: селектор первого ребенка с селектором идентификатора. Я работаю с Bitrix CRM, поэтому мне нужно переопределить некоторые из его css, для этого я использую "!важно" (хардкор). Вот такой код:

.crm-offer-info-table tr:not(:first-child) {
    float:right!important;width:49%}
.crm-offer-info-table tr:nth-child(2n+2):not(#section_contact_info_contents>tr) {
    float: left!important;
    padding-right: 10px;
    width:49%
}

HTML часть

    <table id="section_contact_info_contents" class="crm-offer-info-table"><tbody>
<tr id="section_contact_info">
            <td colspan="5">
                ..some code..
            </td>
        </tr>
    <tr id="email_wrap" class="crm-offer-row">
                <td class="crm-offer-info-drg-btn"></td>
                <td class="crm-offer-info-left">
                </td><td class="crm-offer-info-right"></td>
                <td class="crm-offer-info-right-btn"></td>
                <td class="crm-offer-last-td"></td>
    </tr>
    <tbody>
</table>

http://jsfiddle.net/d990f0a1/

Итак, главный вопрос .crm-offer-info-table tr: not (: first-child, #section_contact_info_contents>tr){}> это не работает, мне нужно как-то объединить эти 2 селектора в :not(), и все это тоже должно быть сделано в css.

html css bitrix
У вопроса есть решение - Посмотреть?

https://stackoverflow.com/questions/31910401/combination-of-first-child-and-id-selectors-in-not-doesnt-work#comment51734668_31910401
Как насчет попытки удалить">", поскольку tr не является прямым дочерним элементом таблицы, все еще есть "tbody".
https://stackoverflow.com/questions/31910401/combination-of-first-child-and-id-selectors-in-not-doesnt-work#comment51734973_31910401
Это не имело большого значения, но спасибо, я удалил > .
https://stackoverflow.com/questions/31910401/combination-of-first-child-and-id-selectors-in-not-doesnt-work#comment51735091_31910401
Я думаю.crm-offer-info-table tr: nth-child(2n+2): not(#section_contact_info_contents tr) не существует в вашем примере, так как все .в CRM-предложение-информация-Таблица тр также #section_contact_info_contents тр.
https://stackoverflow.com/questions/31910401/combination-of-first-child-and-id-selectors-in-not-doesnt-work#comment51735186_31910401
Как я уже сказал, это CRM, поэтому у него есть много таблиц с классом "crm-offer-info-table", я просто показываю исключение из правила. <table id="section_company_info_contents" class="crm-offer-info-table crm-offer-main-info-text"><tbody><tr id="section_company_info"> <td colspan="5"> ...некоторый код.. < / td> < / td>< / tr>
https://stackoverflow.com/questions/31910401/combination-of-first-child-and-id-selectors-in-not-doesnt-work#comment51735365_31910401
Перечислите цели, которые вы хотите, и то, что вам нужно сделать для них, и если есть определенный порядок приоритетов, сообщите нам о них. вы просто пытаетесь исключить первую строку?
https://stackoverflow.com/questions/31910401/combination-of-first-child-and-id-selectors-in-not-doesnt-work#comment51735532_31910401
@zer00ne Ну, что я пытаюсь сделать. У меня есть все данные, перечисленные в одном столбце (я не имею в виду 1 тег td, я имею в виду, что 5 тегов td фактические данные заполняются в 2 столбца), и я хочу разделить его на 2 столбца. Я достиг этого с помощью " float: left / right "и"width:49%". Проблема в том, что одна таблица имеет действительно широкие данные (textarea), которые должны быть помещены только в 1 столбец. Итак, я пытаюсь сделать исключение из моего правила css. Поэтому я не могу переопределить правила float другим css, мне нужно установить правило той строки, которую я вставил. Один "tr:nth-child(2n+2): not (#section_contact_info_contents>tr)" эта часть работает aswesome
https://stackoverflow.com/questions/31910401/combination-of-first-child-and-id-selectors-in-not-doesnt-work#comment51736549_31910401

Ответы - Комбинация селекторов: first-child и #id в :not() не работает / Combination of :first-child and #id selectors in :not() doesn't work

jakopo87

10.08.2015 09:39:46

Как сказано в спецификации :not, он работает с простыми селекторами, а #section_contact_info_contents>trнет; вы можете разделить его с помощью 2: not селекторов таким образом:

.crm-offer-info-table:not(#section_contact_info_contents) tr:not(:first-child){...}
Источник
zer00ne

11.08.2015 04:16:55

tr:nth-child(2n+2):not(#section_contact_info_contents>tr)не имеет смысла, так как ваша таблица имеет только 2 строки. Отложив в сторону то, что jakopo87 ответил всего на минуту (jakopo87 прав в отношении простых селекторов), давайте рассмотрим, что говорит этот набор правил:

.crm-offer-info-table tr:nth-child(2n+2)

то, что я думаю, вы имеете в виду, это:

Любая четная строка, которая находится внутри любой таблицы, которая является class="crm-offer-info-table"...

Если это то, что вы имели в виду, то так и должно быть:

.crm-offer-info-table> tbody >tr:nth-child(2n)

Далее идет это:

:not(#section_contact_info_contents>tr)

То, что я думаю, вы имеете в виду, это:

...Но исключите все строки внутри уникальной таблицы, которая является id="section_contact_info_contents".

Если это действительно ваше намерение, то так оно и должно быть:

:not(#section_contact_info_contents> tbody >tr);

Конечно, если вы исключаете все строки таблицы, это в основном исключает саму таблицу (по крайней мере, в этом контексте). Поэтому я предлагаю (как и jakopo87) использовать менее подробный набор правил:

:not(#section_ contact_info_contents *)или даже :not(#section_contact_info_contents)

Если вы должны использовать CSS, а не JS, то попробуйте использовать nth-of-typeвместо этого. Тогда вам не придется помнить, что tbodyявляется дочерним table, а tr-дочерним элементом tbody.

Если я правильно помню, вы хотелиtd, который имеет textareaполе, был в его собственном столбце. Попробуйте display: table-columnна trили td. Извините, я не могу быть более конкретным, но информация, которую вы опубликовали, не включает в себя полный макет, который я подозреваю. Без надлежащего знания макета, советы по HTML / CSS, как подковы и ручные гранаты.

Источник
Помочь в развитии проекта:

Другие вопросы

Ответы на ваши вопросы

Закрыть X