:not()伪类未获得正确的输出 [英] Not getting correct output by :not() pseudo class

问题描述

 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和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> 

为主体定义颜色以产生其他结果:

 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元素，但不建议使用它，因为即使 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> 

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>

Now browser shows the first line of html in red color and remaining three lines are in blue color. But I think the second line should not be colored blue because it has class value "awesome" and it is element. So it is against both rules I wrote in my css.Therefor,it should be not styled.Can anybody help?

解决方案

Add border to notice that :not(div) is also selecting body and html element. your second element is not being selected but is inherting the color from body.

You can clearly notice there is no border around the second 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>

Define a color to body to have another result:

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>

Better consider a wrapper when applying a selector to make sure the scope of your selection is well defined and you don't select unwanted elements. You may use the body element but it's not recommended because even the body can give you some surprise.

.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>

这篇关于:not()伪类未获得正确的输出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！