Question

在下面的示例中，如何在THIS标记内的文本p上应用CSS样式，而不将CSS应用于span标记？

<p>
    <span class='x' id='1'><a href='#'>y</a>.</span>
    THIS
</p>

Answer 1

您可以间接定位-首先定位整个p，然后定位范围和其中的a-有效地选择p内具有标签的所有内容。

在下面，我将“文本”定位为红色，然后将其覆盖以其他部分为目标，以使它们具有不同的颜色。s然后我给出一个稍长的版本，以演示每个部分的原样。有针对性。

p {color: red}
p span { color: black}
p span a { color: blue}

<p><span class='x' id='1'><a href='#'>y</a>.</span>THIS</p>


<p>
  <span class='x' id='1'>
    <a href='#'>This is a link</a>
  This is text within the span</span>
  This is another test
</p>

Answer 2

要选择内容之外的中的文本，可以使用:not()选择器：

p :not(span)

尽管THIS没有包装在元素中，但是CSS不能单独设置其样式。

如果您要使用CSS，则建议将THIS包装在带有类的另一个标签中。否则，可以使用css格式化并还原子元素样式，请参见unset，inherit和initial。例如：

p {color: red}
p span { color: initial }
p span a { color: initial }

<p><span class='x' id='1'><a href='#'>y</a>.</span>THIS</p>

如何从标记中选择特定文本以应用CSS？

2 个答案: