以什么顺序以及如何应用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成为abc上涂布lowercase,然后 abc变成Abc上施加capitalize

但是,似乎

AbC变为abc申请lowercase,然后capitalize应用于原始文本.即对AbC不上abc,因为我以为.

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

Answer 1

CSS规则按级联顺序应用.

根据重要性排序(正常或重要)

你的所有规则都!important没有影响力.

和来源(作者,用户或用户代理).

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

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

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

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

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

(类名称在类属性中出现的顺序完全不相关.)

AbC在应用小写时变为abc,然后将大写应用于原始文本.就像我想的那样在AbC上不在abc上.

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

某些属性允许应用多个效果,但它们通过在单个规则中接受多个值来实现(例如text-decoration: underline overline).