Комбинация селекторов: first-child и #id в :not() не работает
У меня возникли проблемы с :не() селектор 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>
Итак, главный вопрос .crm-offer-info-table tr: not (: first-child, #section_contact_info_contents>tr){}> это не работает, мне нужно как-то объединить эти 2 селектора в :not(), и все это тоже должно быть сделано в css.







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

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){...}

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, как подковы и ручные гранаты.