-
CSS选择器分类 [后代选择器、交集选择器、并集选择器(分组选择器)]
<style>
/* 后代选择器
空格就表示后代，*.box* p 就是.box的后代所有的p。
特点：可以把修饰的标签，指定到 某个区域里。 */
/* 0-"#" 1="." 3-"标签" */
.box ul li p{
color: pink;
}
/* 0 1 1 */
.box p{
color: aquamarine;
}
.box p span{
color: rgb(255, 202, 202);
text-decoration: underline;
}
/* 后代选择器，修饰的内容 是某一 制定范围内的 所有的元素的样式
后代选择器 会把修饰的范围缩小 */
.box a{
color: blueviolet;
text-decoration: none;
}
.box a:hover{
color: brown;
text-decoration: underline;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>
<p>段落</p>
<p>段落<span>100</span></p>
<p>段落<span>200</span></p>
</li>
</ul>
</div>
<a href="">你好</a>
<a href="">嘿嘿</a>
<div class="box">
<a href="">你好</a>
<a href="">你好</a>
<a href="">你好</a>
</div>
</body>
效果图：
<style>
h3{
font-size: 30px;
}
/* 交集选择器 交集选择器没有空格
选择的元素是同时满足两个条件：必须是h3标签，然后必须是special标签*/
h3.red{
color: red;
}
</style>
</head>
<body>
<h3 class="red">我是标题3标签</h3>
<h3>我是标题3标签</h3>
<h3>我是标题3标签</h3>
<h3 class="red">我是标题3标签</h3>
<h3 class="red">我是标题3标签</h3>
<p class="red">this is my life</p>
<p class="red">this is my life</p>
<p class="red">this is my life</p>
</body>
效果图：
<style>
p,div,em{
/* 并集选择器(分组选择器)
用逗号就表示并集。多个标签，使用一样的样式规则。我们就使用并集选择器。
有多个不同的标签，想给这些标签，设置相同的样式规则，
我就把他们用并集选择器 写在一起。 */
/* 某些指定的标签，设置相同的样式规则，我们可以使用并集选择器去修饰它们 */
font-size: 50px;
font-style: normal;
}
.box1,.box2{
color: rgb(26, 69, 107);
background-color: pink;
}
</style>
</head>
<body>
<p>小红</p>
<div>小花</div>
<em>小紫</em>
<div class="box1">盒子1</div>
<div class="box2">盒子2</div>
</body>
效果图：
-
相关阅读:
跨域？如何解决？同源策略？
Abbkine IFKine驴抗小鼠IgG二抗，绿色荧光标记方案
工业自动化应用智能制造技术有哪些作用？
漏洞分析｜Adobe ColdFusion WDDX 序列化漏洞利用
机器学习编译器的前世今生
Markdown语法
【MySQL基础 | 中秋特辑】多表查询详细总结
嘉创房地产冲刺港交所：半年营收4.7亿 现金及现金等价物减少
第六季完美童模 代言人段沫如 全球赛个人风采展示
点云从入门到精通技术详解100篇-三维文物点云去噪与精简方法研究与应用（下）
- 原文地址：https://blog.csdn.net/m0_71814235/article/details/125486867