Question

我怎样才能使：not（） - 选择器在以下示例中起作用？

HTML

<div id="content">
  <div id="one">
    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green -->
    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green -->
</div>
  <div id="two">
    <div class="mystyle"><p>This is a <a href="">link</a>.</p></div> <!-- should NOT be green -->
    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green -->
</div>
</div>

CSS

#content a:not(.mystyle) {
  color: green;
}

的jsfiddle

Link to jsfiddle

重要

我正在尝试在我的博客上设置外部小部件的样式。我无法访问它的HTML，因此无法更改HTML。我正在寻找一个仅限CSS的解决方案。

Answer 1

在您的示例中，:not()选择器应用于a元素。这只会选择没有a类的.mystyle个标记。

#content > * > *:not(.mystyle) a {
    color: green;
}

上面将选择任何没有.mystyle课程的2级以下的后代，然后将所有后代a标记为绿色。

以下是一个工作示例：

＆＃13;

#content > div > div:not(.mystyle) a {
  color: green;
}

＆＃13;

<div id="content">
  <div id="one">
    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green -->
    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green -->
</div>
  <div id="two">
    <div class="mystyle"><p>This is a <a href="">link</a>.</p></div> <!-- should NOT be green -->
    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green -->
</div>
</div>

＆＃13;

Answer 2

有四个链接。所有链接都应该是绿色的，但有一个例外：class =“mystyle”中的链接。

那你为什么要使用*** Settings *** Library CustomLibrary.py *** Keywords *** Example keyword pass *** Test Cases *** Example test case log hello, world! # this will pass, since we called the log keyword require keyword BuiltIn.Log # this will fail because we haven't called the example keyword require keyword Example keyword？只需将颜色赋予现有类。

:not()

* { color: green; }

.mystyle * { color: red; }

Answer 3

那样的？：

div:not(.mystyle) > p > a { color: green; }

<div id="content">
  <div id="one">
    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green -->
    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green -->
</div>
  <div id="two">
    <div class="mystyle"><p>This is a <a href="">link</a>.</p></div> <!-- should NOT be green -->
    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green -->
</div>
</div>

Answer 4

执行此操作的方法可以查看以下代码段。

div:not(.calc) > p {
  color: green;
}

<div id="content">
<div><p>Hi</p></div>
<div ><div class="calc"><p>Hi</p></div></div>
<div><p>Hi</p></div>
</div>

所有后代的CSS：not（）选择器

4 个答案: