6-选择器优先级别

选择器优先级别

    
    

    



    
我是div

代码：
“*” 是通配符，可以匹配所有的标签

网站设计、网站制作的关注点不是能为您做些什么网站，而是怎么做网站，有没有做好网站，给成都创新互联一个展示的机会来证明自己，这并不会花费您太多时间，或许会给您带来新的灵感和惊喜。面向用户友好，注重用户体验，一切以用户为中心。

    
    

    



    
我是div

代码：当前div标签的颜色是绿色，因为是就近原则，div标签与green设计的样式最近。

    
    

    



    
我是div

代码：类选择器 > 标签选择器

上图：可以看到 类选择器 是 优先于 标签选择器的。

    
    
    
    



    
我是div

代码：
在div标签中在加一个 test2类标签（针对同一个标签，类标签可以同时加多个）；
设计test2类标签为紫色。

上图：图中是紫色；当前有test1和test2两个类选择器，相同类别是就近原则。

    
    
    
    



    
我是div

代码：id选择器 > 类选择器

上图：
id选择器 优于 类选择器； 注意id是唯一的，同一个标签不可以设置多个id，否则id选择器就会失效。

    
    
    
    



    
我是div

代码：id选择器 > div+类选择器（复合选择器）

上图：颜色没有变

    
    
    
    



    
我是div

代码：div+id选择器（复合） > id选择器

选择器的针对性越强，它的优先级就越高

选择器的权值：
通配选择符（*）：0
标签： 1
类： 10
属性： 10
伪类： 10
伪元素： 10
id： 100
important： 1000
原则：选择器的权值加到一起，大的优先；如果权值相同，后定义的优先（就近）

    
    
    
    



    
我是div

代码：在标签选择器中加了一个 !important，所以其当前的权值是1000+1=1001

• 优先级排序

important > 行内设计 > id > 类 > 标签 | 伪类 | 属性选择 > 伪元素 > 通配符 > 继承

本文名称：6-选择器优先级别
浏览路径：http://cdxtjz.cn/article/jcdgjd.html