Question

正如我所料，文字"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代码的情况下为蓝色中的“蓝色”文字着色？以下是所要求的预期输出：

Answer 1

您的CSS选择器#main > :not(a)表示匹配＃34; #main的直接子元素，除了元素＆＃34;。

不幸的是，＆＃34; Color Blue＆＃34;不在子元素中，因此您的CSS选择器不匹配它。同样不幸的是 - 你不能直接定位文本节点（参见：Is there a CSS selector for text nodes?），所以你不能只选择＆＃34; Color Blue＆＃34;文本

相反，也许您可以设置整个#main的样式，但是然后将a的背景颜色更改为其他内容？ e.g。

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

Answer 2

这是你需要的吗？请让我知道:)

这是你的输出：

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

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

Answer 3

文本节点没有样式您可以考虑使用inline-block / block

使标记显示在不同的行中

检查以下代码段

＆＃13;

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

＆＃13;

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

＆＃13;

希望这有帮助

Css：不行不通

3 个答案: