1.交集选择器和并集选择器
<!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>
/*选择器组合
我们将class为red的元素设置为红色(字体)
并且将class为red的div字体大小设置为30px
*/
.red{
color: red;
}
/*交集选择器
作用:选中同时符合多个条件的元素
语法:选择器1选择器2选择器3……选择器n{}
*/
div.red{
font-size: 30px;
}
.a.b.c.d{
color: slateblue;
font-size: 25px;
}
/* 一般不推荐使用 div#an{} ,因为id的特殊性,加上div有点多此一举,但不是不行*/
/* 对于不同的标签,相同的样式,使用下面的方式会更简洁
选择器分组
作用:同时选择多个选择器对应的元素
语法:选择器1,选择器2,……选择器n{}
如: #b,p,h1,div.red{}
*/
h1,h2{
color: tomato;
}
</style>
</head>
<body>
<div class="red">这是个div</div>
<p class="red">这是个p</p>
<p class="a b c d">交集选择器例子</p>
<h1>选择器分组例子</h1>
<h2>选择器分组例子哦</h2>
</body>
</html>
2.关系选择器
<!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>
/*子元素选择器
作用:选中指定父元素的指定子元素
语法:父元素>子元素
例如:div>p>span{}
*/
div > span{
color:orange;
/* 只有我是div中的span元素变色*/
}
div.box >span{
color: orangered;
}
/* 后代元素选择器
作用:选择指定元素内的指定后代元素
语法:祖先 后代
*/
div p{
color: paleturquoise;
}
/* 选择下一个兄弟
语法: 前一个+下一个
选择下面所有的大小
语法:兄 ~弟
*/
span+p{
font-size: 30px;
}
</style>
</head>
<body>
<!--父元素:直接包含子元素的元素
子元素:直接被父元素包含的元素
祖先元素:直接或间接包含后代元素的元素
一个元素的父元素也是他的祖先元素
后代元素:直接或间接被祖先元素包含的元素
子元素也是后代元素
兄弟元素:具有相同父元素的元素是兄弟元素
-->
<div class="box">
一个div
<p>
我是div中的p元素
<span>我是p元素中的span</span>
</p>
<span>我是div中的span元素</span>
</div>
<div>
<span>又是一个div中的span</span>
</div>
<div>
<span>我是div中的span</span>
<p>我是div中的p</p>
</div>
</body>
</html>