首页 > 开发 > CSS > 正文

CSS实例教程:CSS Selector的优先级

2024-07-11 09:02:27
字体:
来源:转载
供稿:网友

网页制作Webjx文章简介:11个class与一个id”谁的优先级高的问题.

上周五下班前我们敬爱的三三大人又在组里讨论了关于“11个class与一个id”谁的优先级高的问题~_~!


猜一下

01<!DOCTYPE HTML>

02<html>

03<head>

04<meta charset="utf-8">

05<style type="text/css">

06body{font-family: "Microsoft YaHei";}

07.a1 .a2 .a3 .a4 .a5 .a6 .a7 .a8 .a9 .a10 .a11{color:red;}

08#b{color:green;}

09</style>

10</head>

11

12<body>

13<div class="a1">

14<div class="a2">

15<div class="a3">

16<div class="a4">

17<div class="a5">

18<div class="a6">

19<div class="a7">

20<div class="a8">

21<div class="a9">

22<div class="a10">

23<div class="a11" id="b">

24CSS Selector的优先级

25</div>

26</div>

27</div>

28</div>

29</div>

30</div>

31</div>

32</div>

33</div>

34</div>

35</div>

36</body>

37</html>

答案很明显就是你看到的那样儿,究竟为什么一时又很难说的清楚。

今天突然想到精通css里讲到过关于css特殊性的计算,原来是酱紫的…

所有的selector都被分配一个数值(包含内联),将所有selector值相加得到最终优先级。但是计算中并不是满10进1来计算,而是采用一个没有指定的更高的基数。保证高级别的selector(id)不被那11个或者更多低级的selector组合超出。
selector的特殊性分四个等级:a,b,c,d可将a看成是最高位以此类推

CSS实例教程:CSS Selector的优先级

 

得出此表:

CSS实例教程:CSS Selector的优先级

 

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表