[英]Combination of :first-child and #id selectors in :not() doesn't work
I am having trouble with :not() css selector. 我在:not()CSS选择器时遇到问题。 I check already on stackoverflow, but nothing is working.
我已经检查了stackoverflow,但是没有任何反应。 The problem is when I combine :first-child selector with id selector.
问题是当我结合:first-child选择器和id选择器时。 I am working with Bitrix CRM, so I need to override some of its css, for this purpose I use "!important" (hardcore).
我正在使用Bitrix CRM,因此我需要覆盖其某些CSS,为此,我使用“!important”(核心)。 Here is a code:
这是一个代码:
.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 part 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/ http://jsfiddle.net/d990f0a1/
So, the main question is .crm-offer-info-table tr:not(:first-child, #section_contact_info_contents>tr){} it doesn't work, I need to somehow combine these 2 selectors in :not(), and all this must be done in css too. 因此,主要问题是.crm-offer-info-table tr:not(:first-child,#section_contact_info_contents> tr){},它不起作用,我需要以某种方式将这两个选择器组合到:not()中,而且所有这些也必须在CSS中完成。
As the :not specs says, it works with simple selectors and #section_contact_info_contents>tr
is not; 正如:not specs所说,它可以与简单的选择器一起使用,而
#section_contact_info_contents>tr
则不能。 you can split it using 2 :not selectors in this way: 您可以使用2:not选择器以这种方式拆分它:
.crm-offer-info-table:not(#section_contact_info_contents) tr:not(:first-child){...}
tr:nth-child(2n+2):not(#section_contact_info_contents>tr)
doesn't make sense since your table only has 2 rows. tr:nth-child(2n+2):not(#section_contact_info_contents>tr)
没有意义,因为您的表只有2行。 Putting aside what jakopo87 answered just for a minute (jakopo87 is right about simple selectors), let's consider what this rule set is saying: 抛开jakopo87刚才回答的内容一分钟(jakopo87关于简单选择器是正确的),让我们考虑一下此规则集在说什么:
.crm-offer-info-table tr:nth-child(2n+2)
what I think you mean is: 我认为您的意思是:
ANY even numbered row that is inside of ANY table which is
class="crm-offer-info-table"
...任何 偶数行是任何表是内部
class="crm-offer-info-table"
...
If that's what you meant, then this is how it should be: 如果这就是您的意思,那么应该是这样:
.crm-offer-info-table
> tbody >
tr:nth-child(2n)
.crm-offer-info-table
> tbody >
tr:nth-child(2n)
Next is this: 接下来是这个:
:not(#section_contact_info_contents>tr)
What I think you mean is: 我认为您的意思是:
... BUT exclude ALL rows inside a UNIQUE table which is
id="section_contact_info_contents"
.... 但是 排除UNIQUE表中所有行,这些表是
id="section_contact_info_contents"
。
If that is in fact your intention, then this is how it should be: 如果这实际上是您的意图,那么它应该是这样的:
:not(#section_contact_info_contents
> tbody >
tr);
:not(#section_contact_info_contents
> tbody >
tr);
Of course if you exclude ALL rows of a table, that's basically excluding the table itself (in this context at least). 当然,如果排除表的所有行,则基本上是排除表本身(至少在此情况下)。 So I suggest (as did jakopo87) you use a less verbose rule set:
因此,我建议您(如jakopo87一样)使用较为宽松的规则集:
:not(#section_ contact_info_contents *)
or even :not(#section_contact_info_contents)
:not(#section_ contact_info_contents *)
甚至:not(#section_contact_info_contents)
If you must use CSS rather than JS, then try using nth-of-type
instead. 如果必须使用CSS而不是JS,请尝试使用
nth-of-type
。 Then you won't have to remember that tbody
is the child of table
, and tr
is the child of tbody
. 这样您就不必记住
tbody
是table
的孩子,而tr
是tbody
的孩子。
If I remember correctly you wanted the td
that has a textarea
to be in it's own column. 如果我没记错的话,您希望将具有
textarea
的td
放在其自己的列中。 Try display: table-column
on the tr
or td
. 尝试
display: table-column
tr
或td
上的display: table-column
。 Sorry I can't be more specific, but the info you posted does not include a full layout I suspect. 抱歉,我无法提供更多具体信息,但是您发布的信息并不包含我怀疑的完整版式。 Without the proper knowledge of the layout, advice on HTML/CSS is like horseshoes and hand grenades.
如果没有适当的布局知识,HTML / CSS上的建议就像马蹄铁和手榴弹一样。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.