css优先级别

CSS优先级包含四个级别(文内选择符,ID选择符,Class选择符,元素选择符)以及各级别出现的次数。根据这四个级别出现的次数计算得到CSS的优先级。

CSS优先级的计算规则如下:
* 页面中定义的样式,加1,0,0,0
* 每个ID选择符(如 #id),加0,1,0,0
* 每个Class选择符(如 .class)、每个属性选择符(如 [attribute=])、每个伪类(如 :hover)加0,0,1,0
* 每个元素选择符(如p)或伪元素选择符(如 :firstchild)等,加0,0,0,1
然后,将这四个数字分别累加,就得到每个CSS定义的优先级的值,
然后从左到右逐位比较大小,数字大的CSS样式的优先级就高。

例子:
css文件或<style>中如下定义:
1. h1 {color: red;}
/* 一个元素选择符,结果是0,0,0,1 */
2. body h1 {color: green;}
/* 两个元素选择符,结果是 0,0,0,2 */
3. h2.grape {color: purple;}
/* 一个元素选择符、一个Class选择符,结果是 0,0,1,1*/
4. li#answer {color: navy;}
/* 一个元素选择符,一个ID选择符,结果是0,1,0,1 */
元素的style属性中如下定义:
h1 {color: blue;}
/* 页面中定义,一个元素选择符,结果是1,0,0,1*/

如此以来,h1元素的颜色是蓝色。
注意:
1、!important声明的样式优先级最高,如果冲突再进行计算。
2、如果优先级相同,则选择最后出现的样式。
3、继承得到的样式的优先级最低。


### CSS 样式优先级设置规则 在网页开发中,CSS 样式优先级决定了当多个样式规则应用于同一 HTML 元素时,哪一个规则会被最终采用。以下是详细的优先级设置规则: #### 1. **`!important`声明** 如果某条样式规则带有 `!important` 声明,则这条规则具有最高优先级,无论其他规则的选择器特异性如何[^4]。需要注意的是,IE6 浏览器并不支持此特性。 #### 2. **内联样式 (Inline Styles)** 内联样式是指直接写入 HTML 元素的 `style` 属性中的样式。这种样式的优先级仅次于带 `!important` 的规则[^4]。尽管其优先级较高,但由于难以管理和维护,通常不建议频繁使用。 #### 3. **ID 选择器 (#id)** ID 选择器通过唯一的标识符来定位特定的 HTML 元素。它的优先级高于类选择器、属性选择器和伪类选择器,但低于内联样式[^4]。 #### 4. **类选择器 (.class), 属性选择器 ([attr]), 和伪类选择器 (:pseudo-class)** 这些选择器的优先级相同,位于类型选择器之上。它们可以通过 `.myClass`, `[attr=value]`, 或者 `:hover` 等方式定义[^5]。如果存在多个此类选择器影响同一个元素,则具体生效的规则取决于特异性的计算结果。 #### 5. **类型选择器 (Type Selectors)** 类型选择器基于 HTML 元素名称匹配目标对象,比如 `div`, `p`, `span` 等。这类选择器的优先级较低,在没有更具体的规则情况下才会被应用。 #### 6. **通用选择器 (*)** 作为最低级别的选择器,它可以匹配所有的 HTML 元素,因此只有在其没有任何竞争的情况下才可能起作用。 除了以上提到的基础层次之外,还需要注意几个额外的因素会影响最终的效果: - **特异性(Specificity):** 特异性是一个数值组合用来衡量每一条 css 规则的重要性程度。它由四个部分组成(从左至右分别是 a,b,c,d),分别代表不同种类选择器的数量总和。例如:`a=number of id selectors; b=number of class selectors, attributes or pseudo-classes; c=number of type selectors and pseudo-elements; d=number of element name.` 当两条规则拥有相同的权重时,最后加载的那个将会覆盖前面的一个[^3]。 - **继承(Inheritance):** 某些属性可以从父节点传递给子节点,即使后者并没有显式指定这些属性值也会受到影响。不过这种情况不会改变原有优先权结构只是补充了一些默认行为而已[^3]。 综上所述,为了构建高效且易于维护的网站界面设计,开发者应该充分理解和灵活运用上述各项原则,并尽量减少滥用 !important 来保持代码整洁有序。 ```css /* 示例 */ #uniqueElement { color: red; } .specialClass { background-color: blue; } [type="text"] { border: 1px solid black; } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值