CSS 选择器优先级

标签：存在   优先   红色   第一步   class   import   class选择器   定义   依次   

1. CSS选择器判断过程：

第一步：判断选择器的权重(多重组合样式同理，多个class<一个id); 权重从大到小依次为:

• !import
• 元素行内样式
• ID选择器
• 伪类选择器/属性选择器>类选择器
• tag标签选择器
• *通配符
• 继承

第二步: 同种类型的权重判断选择器的顺序

• 同种类型的权重不同层数，组合层数多的 > 组合层数少的
• 同种类型的权重同等层数，后定义的 > 先定义的

2.实例

(1). 单个选择器，不同权重

//HTML
<div class=‘styleParent‘><a id="style" class="style" href="javascript:;">css样式</a></div>

// CSS
#style { color: red; }
.style { color: blue; }

说明：ID选择器 > class选择器； 最终显示为红色；

(2).多个低权重，一个高权重

#style { color: red; }
.styleParent > .style { color: blue; }

说明：ID选择器 > class选择器； 最终显示为红色；

(3). 相同权重，不同层数

.styleParent > .style { color: red; }
.style { color: blue; }

说明：同种权重，层数多的 > 层数少的； 最终显示为红色；

(4). 相同权重，相同层数

 .style { color: red; }
.style { color: blue; }

说明：同种权重，相同层数， 后定义的 > 先定义的； 最终显示为蓝色；

3. CSS 使用注意事项:

(1). 不要再ID选择器前使用标签名

解释：ID选择是唯一的，加上标签名相当于画蛇添足了，没必要。

(2). 不要在类选择器前使用标签名

解释：如果没有相同类的名字出现就是没必要，但是如果存在多个相同名字的类选择器则有必要添加标签名防止混淆如（p.colclass{color：red;} 和 span.colclass{color:red;}

(3). 尽量少使用层级关系

如：#divclass p.colclass{color:red;}改为 .colclass{color:red;}

CSS 选择器优先级

标签：存在   优先   红色   第一步   class   import   class选择器   定义   依次   

原文地址：https://www.cnblogs.com/zero-zm/p/9900616.html