css - CSS 类型关系

Question

给定的 CSS

span.xml {color: #0000CC;}
span.ind0 {margin-left: 0em;}

和 HTML 的

<code>
<span class="ind0 xml">&lt;task /&gt;</span>
</code>

就格式而言，我得到了我的期望。但现在我想为更复杂的 XML 示例添加一些内部跨度。Sp，带有额外的 CSS

span.xml.-text {color: #000000; font-weight: bold;}

和 HTML 的

<span class="ind0 xml">&lt;task&gt<span class="-text">TEXT</span>&lt;/task&gt;</span>

我希望 TEXT 是粗体并返回。假设由于内部跨度是外部跨度的一部分，并且应用了 ind0 和 xml 样式，则内部跨度将是 xml AND ind1 类型，因此 CSS 将适用。不是这样。似乎外部跨度的类型是 span.ind0.xml，这意味着没有应用 -text 样式。

如果我将 CSS 更改为

span.xml-text {color: #000000; font-weight: bold;}

和 HTML 到

<span class="ind0 xml">&lt;task&gt<span class="xml-text">TEXT</span>&lt;/task&gt;</span>

有用。但是由于需要大量内部跨度来正确着色复杂 XML 的各种点点滴滴，这些额外的字符确实开始妨碍我，这是我试图避免的。但我也在努力让我的 CSS 更加健壮和可扩展，因为现在它是一团糟。我有这个作为参考，这让我开始使用 -modifier 约定。但我显然不了解其中的微妙之处。那么，是否有可能有一个采用两种类型的外部跨度，然后是一个只能在应用其中一种输出类型时应用的内部跨度？还是让那些内部跨度类型不与外部跨度类型绑定更好？

标签： cssinheritance