仅在选择器中应用CSS规则文本而不跨度

Question

如何在选择器中仅向文本内部添加样式，而忽略同一标签中的跨度选择器。

JS Fiddle

body {
  color: yellow;
}

ul a:not(span) {
  color: red;
}

<ul>
  <li><a href="http://google.com"><span>this is</span> google page</a></li>
</ul>

Answer 1

Css级联，因此跨度将始终继承锚的颜色，除非您另有说明（以下将跨度样式重置为其初始颜色）

body {
  color: yellow;
}

ul a {
  color: red;
}

ul a>span {
  color: initial;
}

<ul>
  <li><a href="http://google.com"><span>this is</span> google page</a></li>
</ul>

不幸的是，如果您希望跨度为黄色，则必须手动设置为无，告诉跨度跳过继承级别：

ul a>span {
  color: yellow;
}