一，交集选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>15-css交集选择器.html</title>
<!--
交集选择器,相交的部分就是要设置属性值的标签
1,格式:
选择器1选择器2...{
属性:值;
}
2,注意点:
(1),选择器之间没有任何的连接符号
(2),选择器可以是标签名称,也可以是id、class名称
(3),交集选择器仅仅是了解
-->
<style>
p.para1{
color: red;
}
</style>
</head>
<body>
<p>我是段落</p>
<p>我是段落</p>
<p class="para1">我是段落</p>
<p class="para1">我是段落</p>
<p>我是段落</p>
</body>
</html>
二，并集选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>16-css并集选择器.html</title>
<!--
并集选择器
1,格式:
选择器1,选择器2,...{
属性:值;
}
2,注意点:
(1),选择器之间利用,连接
(2),选择器可以是标签名称,也可以是id、class名称
-->
<style>
.ht,.para{
color: red;
}
</style>
</head>
<body>
<h1 class="ht">我是头</h1>
<p class="para">我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</body>
</html>
三，兄弟选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>17-css兄弟选择器.html</title>
<!--
兄弟选择器,只选中同级的标签
1,相邻兄弟兄弟选择(css2)
格式:
选择器1+选择器2{
属性:值;
}
注意点:
(1),相邻选择器必须用+链接
(2),相邻选择器只能选中紧跟后边的那个标签,不能选中被隔开的标签
2,通用兄弟选择器(css3),指定选择器后边特定的所有选择器都被选中
格式:
选择器1~选择器2{
属性:值;
}
-->
<style>
/*h1+p{*/
/*color: red;*/
/*}*/
h1~p{
color: red;
}
</style>
</head>
<body>
<!--<h1>我是标题</h1>-->
<!--<a href="#">我是超级链接</a>-->
<!--<p>我是段落</p>-->
<!--<p>我是段落</p>-->
<!--<p>我是段落</p>-->
<!--<h1>我是标题</h1>-->
<!--<p>我是段落</p>-->
<!--<p>我是段落</p>-->
<!--<p>我是段落</p>-->
<h1>我是标题</h1>
<a href="#">我是超级链接</a>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<h1>我是标题</h1>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</body>
</html>