网站建设资讯

NEWS

网站建设资讯

6-选择器优先级别

选择器优先级别




    
    选择器的优先级别

    



    
我是div

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

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




    
    选择器的优先级别

    



    
我是div

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




    
    选择器的优先级别

    



    
我是div

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

6-选择器优先级别

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




    
    选择器的优先级别
    
    



    
我是div

代码:
在div标签中在加一个 test2类标签(针对同一个标签,类标签可以同时加多个);
设计test2类标签为紫色。

6-选择器优先级别

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




    
    选择器的优先级别
    
    



    
我是div

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

6-选择器优先级别

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




    
    选择器的优先级别
    
    



    
我是div

代码:id选择器 > div+类选择器(复合选择器)

6-选择器优先级别

上图:颜色没有变




    
    选择器的优先级别
    
    



    
我是div

代码:div+id选择器(复合) > id选择器

6-选择器优先级别

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

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




    
    选择器的优先级别
    
    



    
我是div

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

6-选择器优先级别

  • 优先级排序

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


本文标题:6-选择器优先级别
文章源于:http://njwzjz.com/article/jcdgjd.html