<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
交集选择器:
-作用:选中同时复合多个条件的元素,即分层查找,直至查找定位到需要的子元素
-语法:选择器1.选择器2.选择器3.选择器n{}
*/
.red{
color:red;
}
div.red{
/*
选择div中的red,放大字体,注意,div与.red之间不能有空格
也可以使用 div[class="red"] 来指定特定元素
*/
font-size: 30px;
}
/*
选择器分组(并集选择器)
作用:同时选择多个选择器的元素
语法:选择器1,选择器2,选择器3,选择器n{
}
*/
h1,span{
color:yellow;
}
</style>
</head>
<body>
<h1>今天天气很不错</h1>
<div class="red">div元素</div>
<div class="r">div元素</div>
<div class="ed">div元素</div>
<p class="red">p元素</p>
<span>今天心情很好</span>
</body>
</html>
前端基础笔记——复合选择器
最新推荐文章于 2022-07-18 15:50:26 发布