logo标签列表

CSS中的:not无法正常工作

htmlcsscss-selectorsselector
3

我预期文字背景 "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>

我该如何将“Color blue”文本的背景色设置为蓝色，而又不改变HTML代码呢？以下是期望的输出结果：

enter image description here

请确认：您是否尝试仅对“蓝色”文本应用背景样式？将背景样式应用于整个div，然后将“无颜色”的背景设置为另一种颜色是否可行？ - Dexter
是的，确实如此。如果可能的话，我不想更改HTML代码，只更改文本“颜色蓝”。 - TSR
你想要最终输出的样子是什么？在#main中，除了链接以外，所有东西都有蓝色背景是否不起作用？ - Dexter
3个回答
3
您的CSS选择器#main > :not(a)表示匹配“#main的任何直接子元素，但不包括a元素”。
不幸的是，“Color Blue”不在子元素中，因此您的CSS选择器无法匹配它。同样不幸的是-您无法直接定位文本节点(请参见：是否有用于文本节点的CSS选择器？)，因此您不能仅对“Color Blue”文本进行样式设置。
相反，也许您可以针对整个#main进行样式设置，然后将a的背景色更改为其他颜色？例如：
#main { background: blue; }
#main > a { background: white; }
0

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

以下是您的输出：

img

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

0

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

请查看以下代码片段：

#main a{
  display:block;
}
#main *:not(a){
  background:blue;
}
<div id="main">
        <span>Color Blue  </span>  
      
        <a>No color</a>
      </div>

希望这可以帮到你。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接