例如，如果我希望Text1为红色，而不是Text2：
<div class="red"> Text1 <p class="notred">Text2</p> </div>
字符串我在CSS中试过：
.red :not(.notred) { color: #ff0000; }
型尝试此操作时，它不会将样式应用于Text1或Text2。
dtcbnfnu1#
CSS选择器必须以元素为目标（有一些例外，如::first-line pseudoelement）。Text1不是一个元素，所以（同样，忽略::first-line）您不能使用单个规则来定位它。正如@JHeth所说，使用两个规则：一个用于为.red设置红色，另一个用于在.notred中取消红色。
::first-line
Text1
.red
.notred
.red { color: red; } .notred { color: black; }
个字符当然，如果你确定Text1可以放在一行中，你可以作弊，但这是一个非常具体的解决方案，适用于非常具体的情况：
.red::first-line { color: red; }
的字符串为了解释为什么CSS选择器.red :not(.notred)不起作用，它针对.red的后代元素，而不是.notred。.red只有一个后代元素（记住，Text1是一个文本节点，它不是元素！），并且它是.notred-因此该规则不适用于任何情况。下面是一个CSS选择器适用的示例：
.red :not(.notred)
.red :not(.notred) { color: red; }
<div class="red"> <p>Text1</p> <p class="notred">Text2</p> </div>
的字符串在这里，<p>Text1</p>是一个元素，不是.notred，是.red元素的后代，因此可以通过选择器找到它。
<p>Text1</p>
uxh89sit2#
.red { color: #ff0000; } .notred { color: #000000; }
个字符你可以像这样实现它。
brvekthn3#
如果不给它一个类或选择器，你就不能在div中设置这样的文本样式，因为调用红色容器将使它的所有子元素生效，而不需要先指定一个。因此，您必须单独设置标签的样式或指定一个类。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .red .text1 { color: #ff0000; } </style> </head> <body> <div class="red"> <p class="text1">text1</p> <p class="notred">Text2</p> </div> </body> </html>
字符串
3条答案
按热度按时间dtcbnfnu1#
CSS选择器必须以元素为目标（有一些例外，如
::first-linepseudoelement）。Text1不是一个元素，所以（同样，忽略::first-line）您不能使用单个规则来定位它。正如@JHeth所说，使用两个规则：一个用于为.red设置红色，另一个用于在.notred中取消红色。个字符
当然，如果你确定
Text1可以放在一行中，你可以作弊，但这是一个非常具体的解决方案，适用于非常具体的情况：的字符串
为了解释为什么CSS选择器
.red :not(.notred)不起作用，它针对.red的后代元素，而不是.notred。.red只有一个后代元素（记住，Text1是一个文本节点，它不是元素！），并且它是.notred-因此该规则不适用于任何情况。下面是一个CSS选择器适用的示例：的字符串
在这里，
<p>Text1</p>是一个元素，不是.notred，是.red元素的后代，因此可以通过选择器找到它。uxh89sit2#
个字符
你可以像这样实现它。
brvekthn3#
如果不给它一个类或选择器，你就不能在div中设置这样的文本样式，因为调用红色容器将使它的所有子元素生效，而不需要先指定一个。因此，您必须单独设置标签的样式或指定一个类。
字符串