<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示多种选择器</title>
<style type="text/css">
/*标签选择器*/
p{
color: red;
}
/*类选择器 showClass就是类选择器的类名*/
.showClass{
color: cyan;
}
/*id选择器,showId就是这个id选择器的名字*/
#showID{
color: yellowgreen;
}
/*子选择器*/
/*div标签的第一个阶级的span子标签的样式*/
div>span{
color: aquamarine;
}
/*后代选择器*/
div strong{
color: chartreuse;
}
/*组合选择器*/
div, p{
color: darkorchid;
}
/*通用选择器*/
*{
background-color: deeppink;
}
</style>
</head>
<body>
<div>
<span>我是div的子span标签</span>
<p><span>我是div的子标签中的子标签</span></p>
</div>
<div>
<strong>我是什么颜色呢</strong>
<div>我又是什么<strong>颜色呢?</strong></div>
</div>
<div>我是用来演示组合选择器的div标签</div>
<p>我是用来演示组合选择器的p标签</p>
<!--权重值-->
<!--就近原则-->
<!--谁离当前标签近,那么就是用哪个选择器,-->
<p>我显示的是就近原则的颜色</p>
<!--id选择器>类选择器>标签选择器-->
<!--<p id="idSelector" class="classSelector">-->
<!--我显示的颜色-->
<!--</p>-->
<!--内联式>嵌入式-->
<p class="classSelector">欧文</p>
<p style="color: chartreuse" id="idSelector">
我是用来显示内联式
</p>
<!--线面色数就叫权值-->
<!--标签选择器:1-->
<!--类选择器:10-->
<!--id 选择器:100-->
<!--内联选择器:1000-->
</body>
</html>
CSS高级系列之多种选择器及权重值
最新推荐文章于 2025-06-08 16:00:48 发布