div:not(.awesome) {
color: red;
}
:not(div) {
color: blue;
}
<div>Selected for 1st</div>
<div class="awesome">Not selected</div>
<section>This is selected for 2nd</section>
<section>This is selected for 2nd</section>
现在浏览器以红色显示 html 的第一行，其余三行以蓝色显示。但我认为第二行不应该是蓝色的，因为它的类值是“awesome”并且它是元素。所以它违反了我在 css 中编写的两条规则。因此，它不应该被设置样式。任何人都可以帮忙吗？
添加边框以注意到:not(div)也在选择body and html元素。你的第二个元素没有被选择，但是继承来自身体的颜色。
您可以清楚地注意到第二个周围没有边框div:
div:not(.awesome) {
color: red;
}
:not(div) {
color: blue;
border:1px solid
}
<div>Selected for 1st</div>
<div class="awesome">Not selected</div>
<section>This is selected for 2nd</section>
<section>This is selected for 2nd</section>
为 body 定义颜色以获得另一个结果：
div:not(.awesome) {
color: red;
}
:not(div) {
color: blue;
border: 1px solid
}
body {
color: green
}
<div>Selected for 1st</div>
<div class="awesome">Not selected</div>
<section>This is selected for 2nd</section>
<section>This is selected for 2nd</section>
在应用选择器时最好考虑包装器，以确保正确定义选择范围并且不会选择不需要的元素。您可以使用body元素，但不推荐，因为即使the body可以给你一些惊喜。
.container div:not(.awesome) {
color: red;
}
.container :not(div) {
color: blue;
border: 1px solid
}
<div class="container">
<div>Selected for 1st</div>
<div class="awesome">Not selected</div>
<section>This is selected for 2nd</section>
<section>This is selected for 2nd</section>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
