Question

给出以下内容：

// all text should be red except in the excludeme id
$('body:not(#excludeme)').css('color', 'red');
// $('#excludeme').css('color','blue');

body {
  color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
	div text
</div>
<br />
<span>
	<a id="excludeme">this text should be green</a>
	<br />
	span text
</span>

所有文本均显示为红色，但excludeme ID中的文本应保持绿色。：not选择器为什么不排除所选ID？

Answer 1

:not正常运行。如果检查html代码，则可以看到a元素没有将颜色更改为红色的内联样式。它正在从父元素获取颜色，因为所有其他元素均为红色。如果需要，您可以在css

中为此类元素声明样式

#excludeme{
    color: green;
}

您可以在inheritance here

中详细了解css

Answer 2

使用:not()时，颜色将从parent元素继承。

尝试下面的代码-

// all text should be red except in the excludeme id
$("#excludeme").css('color', 'green')
$('body').css('color', 'red');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
    <div>
        div text
    </div>
    <br />
    <span>
        <a id="excludeme">this text should be green</a>
        <br />
        span text
    </span>
</body>

或者您也可以尝试此操作-

body{
  color: red;
}

#excludeme{
  color: green;
}

<body>
    <div>
        div text
    </div>
    <br />
    <span>
        <a id="excludeme">this text should be green</a>
        <br />
        span text
    </span>
</body>

Answer 3

它是从body继承的，因为body也没有excludeme id，请参见：

// all text should be red except in the excludeme id
$('body:not(#excludeme)').css('color', 'red');
//$('#excludeme').css('color','blue');

body {
  color: green;
}
#excludeme {
  color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<body>
  <div>
    div text
  </div>
  <br>
  <span>
<a id="excludeme">this text should be green</a>
<br>
span text
</span>
</body>
a

如果您明确指定excludeme的颜色，它将起作用。

Answer 4

如@ TiiJ7所建议，请检查是否适合Click Me!!

通过以下方式更改CSS：

body {
  color: red;
}

还有JS：

$('#excludeme').css('color', 'green');

Answer 5

您的选择器正在选择ID为excludeme的任何body元素。那只是选择文档的主体元素。然后，您将该样式应用于该元素，该元素将覆盖您在CSS中应用的样式。

您最终会遇到类似这样的情况，其中#excludeme元素没有以任何方式作为目标：

<html>
    <head>
        <style>
            body {
                color: green;
            }
        </style>
    </head>

    <body style="color: red">
        ...
        <a id="excludeme">this text should be green</a>
        ...
    </body>
</html>

您需要直接定位该元素以覆盖样式。

jQuery的：不选择不排除预期的元素

5 个答案: