css 选择器优先级

104 阅读 0 评论 69 点赞

我是靠谱客的博主腼腆鸡翅，这篇文章主要介绍css 选择器优先级，现在分享给大家，希望可以做个参考。

1.单个选择器优先级：

标签选择器 <类选择器 < id选择器 <行内样式表

看我是什么颜色？

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		p{
        	        color:#cc0000;  /*深红色*/
			font-size:14px;
	   	}
	   	.myclass{
	   		color:#006600;/*绿色*/
	   	}
	   	#myid{
	   		color:#0000ff;/*蓝色*/
	   	}
	</style>
</head>
<body>
	<div class="top">
   		<p class="myclass"  id="myid" style="color:#000000;">看我是什么颜色？</p>
	</div>
</body>
</html>

这个例子有标签选择器(p)，类选择器（myclass）,id选择器(myid),还有行内样式(style=""),在浏览器中的结果显示的是黑色。

2.复合选择器优先级

Li -------1

.box ul li{ } ----12

.box .one .two ul li{ } ----32

#myid ul li{ }----102

写的越精确，优先级越高

锄禾日当午

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		.box .one ul li{
	   		color:red;
	   	}
	   	li{     color:blue;
			font-size:14px;
			line-height:150%;
	   	}
	</style>
</head>
<body>
	<div class="box">
  		<div class="one">
    			<ul>
				<li>锄禾日当午</li>
				<li>锄禾日当午</li>
			</ul>
   		</div>
 	</div>
</body>
</html>