首页 > 代码库 > css交集选择器、并集选择器、兄弟选择器
css交集选择器、并集选择器、兄弟选择器
一,交集选择器
<!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="http://www.mamicode.com/#">我是超级链接</a>-->
<!--<p>我是段落</p>-->
<!--<p>我是段落</p>-->
<!--<p>我是段落</p>-->
<!--<h1>我是标题</h1>-->
<!--<p>我是段落</p>-->
<!--<p>我是段落</p>-->
<!--<p>我是段落</p>-->
<h1>我是标题</h1>
<a href=http://www.mamicode.com/"#">我是超级链接</a>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<h1>我是标题</h1>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</body>
</html>
css交集选择器、并集选择器、兄弟选择器
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。