Question

这是我的示例html。

<html>
<head>
</head>
<body>
<div>
<p>Text with red color</p>
</div>
<div id="temp">
<div style="margin:0px">
<p>
Text without red color
</p>
</div>
</div>
</body>
</html>

我想申请＆＃34;颜色：红色＆＃34;对于不在内部的所有p元素＆＃34; div具有id = temp＆＃34;。

我使用了CSS否定，但没有运气：

p:not(div[id="temp"] p){
color:red;
}

Answer 1

我相信你想要这个：https://jsfiddle.net/9n3jm4bg/1/

:not(#temp) > p { color:red; }

Answer 2

没有这样的选择器，因为CSS :not()伪选择器只能用于简单和一个元素选择器，如ID，类，元素或标记名称以及其他相似之处。

MDN中的文档说：

否定CSS伪类，不是（X），是一个功能符号将一个简单的选择器X作为参数。它匹配一个未由参数表示的元素。 X不得包含其他否定选择器。

https://developer.mozilla.org/en/docs/Web/CSS/:not

所以我想到的唯一方法是使用更高优先级的CSS选择器覆盖你想要不选择的元素的样式，这个CSS选择器只匹配你想要忽略的元素。

示例链接：http://codepen.io/anon/pen/MyrKKW?editors=1000

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS Selector</title>
  <style>
    p {
      color: red;
    }

    #temp p {
      color: initial;
    }
  </style>
</head>
<body>
  <p>Praesent nonummy mi in odio.</p>
  <div id="temp">
    <p>Inside #temp div: fusce neque. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    <p>Another p inside #temp div: raesent blandit laoreet nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  </div>
  <div>
    <p>Inside other div: proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Donec mollis hendrerit risus.</p>
  </div>
</body>
</html>

Answer 3

这是你想要的吗？ https://jsfiddle.net/Lg0zL3wd/1/

div:not(#temp) p{
color:red;
}

<div id="temp">
  <p>text without red</p>
</div>
<div>
  <p>text with red</p>
  <p>text with red</p>
</div>

不在特定div元素

3 个答案: