:not css 选择器未按预期工作[重复]答案

【问题标题】：:not css selector is not working as expected [duplicate]:not css 选择器未按预期工作[重复]
【发布时间】：2020-05-25 12:35:09
【问题描述】：

我想在body标签的dir rtl属性的基础上应用一些css

我之前的实现低于一个不工作的实现

:not([dir="rtl"]) nav > ul > li:last-child a {
    padding-right: 0;
    margin-right: 0;
}

通过提及 body 标签它工作正常，我无法得到相同的原因。任何帮助将不胜感激。

body:not([dir="rtl"]) nav > ul > li:last-child a {
    padding-right: 0;
    margin-right: 0;
}

【问题讨论】：

可能有其他规则覆盖了您的 CSS 规则。当您添加“body”时，它会增加规则的特异性。尝试检查开发者控制台以了解应用的规则。

标签： css

【解决方案1】：

:not([dir="rtl"]) 将影响任何没有[dir="rtl"] 的元素，这意味着即使body 有它，如果里面的任何元素没有它，它仍然适用于子li。即使元素扩展了样式，它也会应用到它，因为它没有属性dir，其值为rtl。

当你添加body选择器时，css只有在body没有这个属性的时候才会生效，但是如果有，其他元素没有这个属性就不会生效。

【讨论】：

这不是真的developer.mozilla.org/en-US/docs/Web/CSS/:not

【解决方案2】：

假设你有一个像

这样的 DOM 结构

<html>
  <head></head>
  <body dir="rtl">
    <nav>
      <ul>
        <li>
          <a>select me when not rtl</a>
        </li>
      </ul>
    </nav>
  </body>
</html>

那么您的规则仍会将<html> 元素视为:not([dir="rtl"])，因此无论您的<body> 上的属性值如何，您的规则仍将处于活动状态。

console.log( document.querySelector(':not([dir="rtl"])') ); // &lt;html&gt;

【讨论】：

【解决方案3】：

您早期版本的 CSS 的问题是选择器 :not([dir="rtl"]) 的第一部分可以匹配 <html> 元素而不是 <body> 元素，或 <body> 和<nav>，可能没有设置dir 属性。

【讨论】：