css 选择器优先级

最新推荐文章于 2024-04-21 19:12:00 发布

wxiaojia

最新推荐文章于 2024-04-21 19:12:00 发布

阅读量656

点赞数

分类专栏： CSS 文章标签： html css 选择器

本文链接：https://blog.csdn.net/m0_37754657/article/details/79093408

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.单个选择器优先级：

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

看我是什么颜色？

<!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

写的越精确，优先级越高

锄禾日当午

<!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>

结果显示的是红色

wxiaojia

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 选择器优先级

1.单个选择器优先级：标签选择器类选择器选择器行内样式表看我是什么颜色？ p{ color:#cc0000; /*深红色*/ font-size:14px; } .myclass{ color:#006600;/*绿色*/ } #myid{ color:#0000f
复制链接

扫一扫