CSS总结（四）—— CSS选择器优先级

时间：2016-03-21 17:59:30 阅读：167 评论：0 收藏：0 [点我收藏+]

标签：

css选择器优先级

优先顺序:

1、！important （IE6不支持此属性）

2、html中元素标签添加的style=“”（css难以管理，不推荐）

3、一个或多个id选择器

例：#top{margin:0;}

4、一个或多个类选择器（包括属性、伪类选择器）

例：.outer{} [data-job="frontend"]{} a:active{}

5、标签选择器

例：div{margin:3px;}

6、通配选择器

例：*{margin：10px;}

★ 选择器规则：

选择器权值相加，大的优先

若权值相同，后定义的优先

同一级别的个数多的优先级高，数量相同比较下一级别的个数

权值：

style=“”——1000

id选择器 ——100

类选择器/属性选择器/伪类选择器 ——10

标签/伪对象 ——1

通配选择器 ——0

例：找出下面优先级相同的选择器

　　A. img.thumb:after　　B.[data-job="frontend"]::first-letter

　　C. #main::before　　 D. [type="checkbox"]:checked　　E. ul#shop-list

答案：

A. img.thumb:after，总纬度是0,0,1,2（即：1+10+1=12；）

B.[data-job="frontend"]::first-letter，总纬度是0,0,1,1（即：10+1=11；）

C. #main::before，总纬度是0,1,0,1（即：100+1=101；）

D. [type="checkbox"]:checked，总纬度是0,0,2,0（即：10+10=20；）

E. ul#shop-list，总纬度是0,1,0,1（即：1+100=101；）

由于该题目假定样式来源一致，因此样式优先级相同的就是C和E了。

标签：

原文地址：http://www.cnblogs.com/emory/p/5302851.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

周排行