CSS: use not: 不仅要排除div,还要排除其中的所有div?
Posted
技术标签:
【中文标题】CSS: use not: 不仅要排除div,还要排除其中的所有div?【英文标题】:CSS: use not: to exclude not only div, but also all the div within it? 【发布时间】:2013-06-30 11:04:37 【问题描述】:我想使用 not: 所以它将排除 div2 元素中的所有 p 元素。 这是html文件:
<body>
<p> not in any div </p>
<div id="div1">
<p> div1 text1</p>
<div>
<p> div2 inner text2</p>
<div>
<p> div1 innermost text3</p>
<p> div1 innermost text4</p>
</div>
</div>
</div>
<div id="div2">
<p> div2 text1</p>
<div>
<p> div2 inner text2</p>
<div>
<p> div2 innermost text3</p>
<p> div2 innermost text4</p>
</div>
</div>
</div>
<div id="div3">
<p> div3 text1</p>
<div>
<p> div3 inner text2</p>
<div>
<p> div3 innermost text3</p>
<p> div3 innermost text4</p>
</div>
</div>
</div>
</body>
这是我使用的 CSS 文件,(显然)它不能正常工作:
div:not(#div2) p
color:green;
这仅排除了 p 元素:“div2 text1”,但不包括 div2 中的其他三个:
我相信这是因为“not:”只排除了 div2 div 而不是其中的两个 div。
如何更改 ":not" 中的上下文,使其不仅包括 div2 div,还包括 div2 中的所有 div?
使用 jQuery 可以轻松实现我想要做的事情:
$('div p').not('#div2 p');
总结一下: 如何更改此 css 行:
div:not(#div2) p
所以它会和 jQuery 行一样(选择)吗?或者换句话说:
选择 div 内的所有 p 元素,除非它是 div2。或者换句话说:
选择包含单词 div1 或 div3 的所有 p 元素(但不使用此信息)
【问题讨论】:
div 真的是 3 还是只是一个例子? 我只需将一个类添加到需要有绿色文本的包含 div 中。使用类作为选择器。跳过这一切的头痛:不是生意。 对 Woodifer,我有 30 个这样的 div,我不想为每个 div 添加一个类 致 Jon:真正的 html 文件中总共有 30 个 div 对乔恩:是的——我可以那样做。但我只是想学习如何使用 :not thingy。如您所见,问题是如何使用 :not 命令,(而不是如何使用其他方式解决问题)Ty。 【参考方案1】:你试过子选择器吗?
body > div:not(#div2)
color:orange
这将仅针对作为正文的直接后代的 div。小提琴:
http://jsfiddle.net/Xk5rb/
【讨论】:
请注意,这仅适用于默认值为inherit
的属性,例如color
(不适用于border
),因为您在技术上并未选择有问题的div。
@Jon - 是的,是的。尽管您可以将 p
附加到该选择器 - body > div:not(#div2) p
如果您特别需要定位它并且它仍然可以工作。 :-)
@Ben:这更像是 :-)以上是关于CSS: use not: 不仅要排除div,还要排除其中的所有div?的主要内容,如果未能解决你的问题,请参考以下文章