CSS(Cascading Style Sheets,层叠样式表)是一种用于描述文档样式表现的语言。在CSS中,层级(或称优先级)是指CSS样式规则在应用于文档元素时的优先级顺序,用于解决样式规则之间的冲突。
设置层级的级别可以通过CSS选择器和样式规则的特殊性(Specificity)来实现。在CSS样式规则中,对于每个样式属性,都会有一个特殊性的值,用于表示样式规则的优先级大小。其中,特殊性由选择器的组成部分和选择器的出现次数和类型共同决定。
CSS中定义了四种选择器,包括元素选择器、类选择器、ID选择器和通配符选择器,它们在计算特殊性时的值依次递增。在选择器中包含伪类和伪元素的情况下,特殊性的计算方法和有没有伪类或伪元素是一样的。
CSS选择器的特殊性值计算方法如下:
- 每个元素选择器和伪元素选择器,特殊性为1。
- 每个类选择器、属性选择器和伪类选择器,特殊性为10。
- 每个ID选择器,特殊性为100。
- 每个内联样式,特殊性为1000。
在CSS中,样式规则的优先级大小规定如下:
- 如果两个样式规则的特殊性相等,则后出现的样式规则优先级更高。
- 如果一条样式规则包含了ID选择器,则它的特殊性值为100,并且优先级高于仅包含类选择器和元素选择器的样式规则。
- 如果一条样式规则包含了N个类选择器或元素选择器,则它的特殊性值为N×10。
- 如果一条样式规则包含了ID选择器和N个类选择器或元素选择器,则它的特殊性值为100+N×10。
- 内联样式规则的特殊性值为1000,即使它的选择器中只包含元素选择器或伪元素选择器。
在CSS中,应该尽可能地避免使用!important关键字来强制修改样式规则的优先级顺序。一方面,这会影响到其他样式规则的应用顺序,使得样式规则的继承关系变得更加困难;另一方面,使用!important关键字还可能会导致样式规则被覆盖而无效。
综上所述,设置层级的级别可以通过CSS选择器的特殊性值来实现,其中包括元素选择器、类选择器、ID选择器和内联样式规则。对于多个样式规则之间的冲突,应该尽量避免使用!important关键字来强制修改优先级顺序。