CSS：没有组合就没有选择器_Css_Css Selectors

CSS：没有组合就没有选择器

css

CSS：没有组合就没有选择器,css,css-selectors,Css,Css Selectors,我试图弄清楚：not选择器是如何工作的。首先，我尝试一下这个代码 <!DOCTYPE html> <html> <head> <style> p { color: #000000; } :not(p) { color: #ff0000; } </style> </head> <body> <h1>This is a heading</h1> <p class=

我试图弄清楚：not选择器是如何工作的。首先，我尝试一下这个代码

<!DOCTYPE html>
<html>
<head>
<style>

p {
    color: #000000;
}

:not(p) {
    color: #ff0000;
}
</style>
</head>
<body>

<h1>This is a heading</h1>

<p class="example">This is a paragraph.</p>
<p>This is another paragraph.</p>

<div>This is some text in a div element.</div>

</body>
</html>


p{
颜色：#000000；
}
：非（p）{
颜色：#ff0000；
}
这是一个标题
这是一个段落
这是另一段
这是div元素中的一些文本。

它的工作原理与ı期望的一样，段落没有样式，div中的文本和标题是红色的。之后，我将样式标记中的零件更改为：

<style>
    :not(p) {
        color: #ff0000;
    }
</style>

<style>
:not(p.example) {
    color: #ff0000;
}
</style>


：非（p）{
颜色：#ff0000；
}

这一次它没有像我预期的那样工作。虽然我希望所有不是段落的元素都显示为红色，但它们都显示为红色

此外，我将样式标记之间的代码更改为：

<style>
    :not(p) {
        color: #ff0000;
    }
</style>

<style>
:not(p.example) {
    color: #ff0000;
}
</style>


：非（p.示例）{
颜色：#ff0000；
}

这一次，我希望不适合“p.example”（h1、div和第二段）的元素为红色，但没有任何元素受到影响

我错过了什么？上面显示的示例不应该选择所有不适合参数选择器的元素吗？是否有关于不单独使用：not选择器的规则（例如不作为p:not或h1:not）？

在@abhitalks评论/反馈之后。在您的第一个示例中，没有什么错，只是与无法工作的继承属性相关。颜色是继承的，但边框不是：

看看这里

：非（p）{
颜色：#f00；
边框：1px纯色灰色；
}

这是一个标题
这是一个段落
这是另一段
这是div元素中的一些文本。

当您使用

：not

选择器时，您应该提到一些父元素。仅基于该父级，它将起作用。否则，它将仅选择所有元素

 <div class="main">

  <h1>This is a heading</h1>
  <p class="example">This is a paragraph.</p>
  <p>This is another paragraph.</p>

  <div>This is some text in a div element.</div>
</div>

另外，如果您不想使用

：not

选择器选择特定元素，则需要使用如下所示

 p:not(.example)
{
  color:green;
}

前面的两个答案都不完全正确

在第二种情况下，只需指定

:not(p)

把所有东西都涂成红色是因为它给身体涂上了颜色，颜色是遗传的
正如一个答案所声称的那样，你必须指定而不是

body :not(p) { color: #ff0000; }
这几乎完全等同于
：not（p）
（意思是
*：not（p）
）。您也不必像另一个答案所声称的那样指定任何其他父项，如
.main
第三个示例失败，因为
：not
的参数不是简单的选择器。您给出的语法似乎试图通过
示例
类选择所有非
p
的内容。正如另一位受访者所指出的，你的意思可能是所有都是
p
，但没有
example
类，而
p:not（.example）
类是正确的
要选择非A和非B的元素（换句话说
不是（A或B）
，只需执行以下操作

:not(A):not(B)
比如说,

:not(h1):not(p)
在本例中，这将适用于
主体
和
div
。更现实的示例是选择p，而不是两个类别中的任何一个：

p:not(.class1):not(.class2)
选择器
：not（p）
匹配除
p
元素之外的所有元素。这包括
主体
元素。当您的唯一样式表是
：not（p）{color:#ff0000；}
时，您将所有内容设置为红色，因为
p
元素从其父元素继承颜色（此处
p
）当它们没有直接设置颜色时
如果要将内容的颜色设置为红色，除了
p
元素及其子元素外，则需要更加明确。一种简单的方法是，假设您只想将整体颜色设置为红色，然后覆盖
p
元素，让内部元素继承颜色：

body { color: red } p { color: black }

：not（p.example）
根本不起作用的原因是的操作数必须是一个简单的选择器，即类型选择器、通用选择器、属性选择器、类选择器、ID选择器或伪类，但不能是这些的任何组合；
p.example
并不简单
您可以使用组合选择器
：not（p）：not（.example）
，它匹配类
example
中除
p
元素之外的任何元素。这可能是您想要的。但是规则不会按您想要的方式工作，因为在这里，选择器也匹配
body
元素，并且它的颜色由唯一没有为i指定颜色的元素继承所以即使在这种情况下，你也需要换个角度思考

body { color: red } p.example { color: black }

在您的第一个示例中，语法不正确…因此您必须定义E（例如body）…--不一定。
：Not（x）
表示法非常好。它的意思是
*：Not（x）
。但是，混淆的是，为什么它只在存在前一个样式（在E或x上）时才起作用。请看这把小提琴：。如果删除第一个类，那么它将停止工作。在它之前添加任何类（目标为E或X），它将工作。CSS规范是否说明了隐含上下文？是的，
body:not（p）
不等同于
E:not（X）
，因为它不是
body:not（p）
。注意空格。它变成了一个后代，如
body*：not（p）
。所以，这一定与后代/contextHmm有关。也许你是对的@abhitalks。仍然想知道为什么我不能复制到jsfiddle。可能是html结构或其他什么。我还注意到，前面的样式应该指向相同的属性。如果前面的类样式
color
，那么
：not（p）{font-weight:bold；
不起作用。谁在不了解发生了什么的情况下否决了这个答案？这个答案非常有用。不公平。你应该提到一些家长——这是错误的。请参阅Alex在另一个答案中链接的规范。这是关于继承属性的。op在中没有做错任何事情