Question

我有以下CSS块：

nav li {
    border-bottom: 1px solid Gray;
}

我怎样才能使它适用于nav和li，而不是export类？目前，样式已应用于export类，因为它位于nav和li标记中。

以下是相应的HTML：

 </head>
  <body>
    <nav class="main menu">
      <ul class = button-container>
        <li>
          <i class="..." style="font-size:6em;" title="..."></i>
        </li>
        <li>
          <i class="..." style="font-size:6em;" title="..."></i>
        </li>
      </ul>

      <ul class="export button-container">
        <li>
          <i class="fa fa-floppy-o" style="font-size:6em;" title="Export"></i>
        </li>
      </ul>
    </nav>

Answer 1

你可以nav li:not( .export ) {}。

更多关于:not pseudo class。

＆＃13;

nav li:not( .export ) {
  color: red;
}

＆＃13;

<nav>
  <ul>
    <li>One</li>
    <li class="export">Two</li>
    <li>Three</li>
  </ul>
<nav>

＆＃13;

修改

- 使用标记OP添加到问题的示例。

注意我使用最低的特异性来简化CSS选择器以更改li。除非.export出现在其他元素上，或者您有其他一些专门针对li的规则，否则您不会需要nav ul:not( .export ) li提供的额外特异性。

＆＃13;

ul:not( .export ) {
  color: red;
}

＆＃13;

<nav>
  <ul class="other">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
  <ul class="export">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
</nav>

＆＃13;

Answer 2

nav li:not(.export) {
    border-bottom: 1px solid Gray;
}

Answer 3

您可以使用:not css选择器：

如果将.export类应用于li：

nav li:not(.export) {
  border-bottom: 1px solid Gray;
}

如果.export类适用于ul：

nav ul:not(.export) li {
  border-bottom: 1px solid Gray;
}

Answer 4

试试这个

nav li:not(.export) {
    border-bottom: 1px solid Gray;
}

CSS如何选择nav和li标签但是排除指定的类？

4 个答案:

修改