千锋教育-做有情怀、有良心、有品质的职业教育机构

手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

当前位置:首页  >  技术干货  > css选择器优先级顺序

css选择器优先级顺序

来源:千锋教育
发布人:zyh
时间: 2023-06-01 14:29:00 1685600940

  CSS选择器的优先级顺序按照以下规则:

  1. !important:最高优先级的标志,添加在声明后面,会覆盖其他所有的样式。

  2. 行内样式:包含在HTML元素标签内的样式,会覆盖外部样式表和内部样式表中的样式。

css选择器优先级顺序

  3. ID选择器:通过ID选择器选中的元素,具有比其他选择器更高的优先级。

  4. 类选择器、属性选择器和伪类选择器:这些选择器的优先级相同,如果同一元素同时出现这几种选择器,优先级按照后面的选择器计算。

  5. 元素选择器、伪元素选择器:这些选择器的优先级最低,只有在其他选择器相同时,才会使用元素选择器和伪元素选择器。

  需要注意的是,当选择器的优先级相同时,会选择后面的样式声明。例如: 

p {
color: red;
}

.blue {
color: blue;
}

p.blue {
color: green;
}

  在这个例子中,p元素和class为.blue的元素会分别有red和blue的颜色,但是拥有p和.blue两个选择器的元素会被赋予绿色。

tags: css
声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。
10年以上业内强师集结,手把手带你蜕变精英
请您保持通讯畅通,专属学习老师24小时内将与您1V1沟通
免费领取
今日已有369人领取成功
刘同学 138****2860 刚刚成功领取
王同学 131****2015 刚刚成功领取
张同学 133****4652 刚刚成功领取
李同学 135****8607 刚刚成功领取
杨同学 132****5667 刚刚成功领取
岳同学 134****6652 刚刚成功领取
梁同学 157****2950 刚刚成功领取
刘同学 189****1015 刚刚成功领取
张同学 155****4678 刚刚成功领取
邹同学 139****2907 刚刚成功领取
董同学 138****2867 刚刚成功领取
周同学 136****3602 刚刚成功领取
相关推荐HOT