css交集選取器、並集選取器、兄弟選取器

標籤：pop   views   選取器   css3   track   doc   color   標籤   class   

一，交集選取器

<!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>

css交集選取器、並集選取器、兄弟選取器