Css :not 不工作答案

【问题标题】：Css :not is not workingCss :not 不工作
【发布时间】：2016-10-23 10:47:18
【问题描述】：

正如我所料，文本"Color Blue" 的背景应该是蓝色的，而不是"No color"。但是，它们都不是彩色的。

    <html>
    <style>
    #main > :not(a)  {
        background: blue;
    }
    </style>
    </head>
    <body>
      <div id="main">
        Color Blue     
        <br>
        <a>No color</a>
      </div>
    </body>
    </html>

如何在不更改 html 代码的情况下将文本“蓝色”的背景着色为蓝色？这是所要求的预期输出：

【问题讨论】：

确认：您是否尝试将背景样式仅应用于“蓝色”文本。将背景样式应用于整个 div，然后将“无颜色”的背景设置为另一种颜色？
确实如此。如果可能的话，我不想更改 html 代码。只是文字“蓝色”
您希望最终输出是什么样的？除了链接之外，#main 中的所有内容都具有蓝色背景是否不起作用？

标签： html css css-selectors selector

【解决方案1】：

您的 CSS 选择器 #main > :not(a) 表示匹配“任何属于 #main 的直接子元素的元素，除了 a 元素”。

很遗憾，“Color Blue”不在子元素中，因此您的 CSS 选择器与它不匹配。同样不幸的是 - 您不能直接定位文本节点（请参阅：Is there a CSS selector for text nodes?），因此您不能只设置“蓝色”文本的样式

相反，也许您可以设置整个#main 的样式，然后将a 的背景颜色更改为其他颜色？例如

#main { background: blue; }
#main > a { background: white; }

【讨论】：

【解决方案2】：

这是你需要的吗？请告诉我:)

这是你的输出：

a {
  background: white;
}
 :not(a) {
  background: blue;
}

<html>
<body>
  <div id="main">
    Color Blue
    <br>
    <a>No color</a>
  </div>
</body>
</html>

【讨论】：

【解决方案3】：

文本节点没有样式您可以考虑使用 inline-block/block 使标签出现在不同的行中

检查以下sn-p

#main a{
  display:block;
}
#main *:not(a){
  background:blue;
}

<div id="main">
        <span>Color Blue  </span>  
      
        <a>No color</a>
      </div>

希望对你有帮助

【讨论】：