以什么顺序以及如何准确地应用 CSS 类？

Question

HTML：

<p class="text-uppercase">1 Example Text</p>
<p class="text-lowercase">2 Example Text</p>
<p class="text-capitalize">3 example text</p>
<p class="text-capitalize text-lowercase">4 EXAMPLE TEXT</p>
<p class="text-lowercase text-capitalize">5 EXAMPLE TEXT</p>

CSS：

.text-lowercase {
  text-transform: lowercase;
}
.text-uppercase {
  text-transform: uppercase;
}
.text-capitalize {
  text-transform: capitalize;
}

输出：

1 Example Text

2 Example Text

3 example text

4 EXAmPLE TExT

5 EXAmPLE TExT

我预计 #4 和 #5 会是

example text - first capitalize, then lowercase
Example Text - first lowercase, then capitalize

到底发生了什么？

演示：http://codepen.io/sanspace/pen/xwOQyL（为清晰起见添加了颜色）

相关：https://github.com/twbs/bootstrap/issues/17672

编辑：

让我补充一下我的理解。我想当应用两个转换时：

AbC 在应用 lowercase 时变为 abc 然后 abc 在应用 capitalize 时变为 Abc

不过好像

AbC 在应用 lowercase 时变为 abc 然后 capitalize 应用于原始文本。 IE。 在AbC 上而不是在abc 上，就像我想的那样。

有人能解释一下吗？

Answer 1

CSS 规则按cascade 的顺序应用。

按重要性排序（正常或重要）

您的规则都不是!important，因此没有影响。

和来源（作者、用户或用户代理）。

您的所有规则都来自作者样式表，因此没有影响。

按选择器的特异性对具有相同重要性和来源的规则进行排序

由于您的所有选择器都由一个类选择器组成，因此它们具有相同的特异性，因此没有影响

最后，按指定的顺序排序：如果两个声明具有相同的权重、来源和特异性，则指定的后者获胜。

因此它们按照它们在样式表中出现的顺序应用。

（类名出现在类属性中的顺序完全不相关。）

AbC 在应用小写时变为 abc，然后大写应用于原始文本。即在 AbC 上，而不是在我想的 abc 上。

该规则描述了原始数据应如何呈现。被覆盖的规则无效。它不会经历多次转换。

一些属性允许应用多种效果，但它们通过在单个规则中接受多个值来实现（例如text-decoration: underline overline）。