一，交集選擇器
<!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>