Question

HTML：

ORDER BY

CSS：

<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>

输出：

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

我期待＃4和＃5成为

1 Example Text

2 Example Text

3 example text

4 EXAmPLE TExT

5 EXAmPLE TExT

到底发生了什么？

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

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

修改：

让我加上理解。我想当两个转换应用时：

应用

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

后，

AbC变为abc 在应用lowercase

时，abc变为Abc

然而，似乎

应用capitalize后，

AbC变为abc lowercase已应用于原始文本。即在capitalize而不是AbC，正如我想的那样。

有人可以对此有所了解吗？

Answer 1

CSS规则按cascade。

的顺序应用

根据重要性（正常或重要）排序

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

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

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

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

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

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

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

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

AbC在应用小写字母时变为abc，然后将大写字母应用于原始文本。就像我想的那样在AbC而不是在abc上。

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

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

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

1 个答案: