css交集選擇器、並集選擇器、兄弟選擇器
阿新 • • 發佈:2018-12-25
一,交集選擇器
<!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>