子選擇器的使用-CSS入門基礎（004）
阿新 • • 發佈：2020-12-10
今天我們繼續分享關於選擇器的內容。
子元素選擇器，就是選中某個或某一類元素的子元素。
語法：
#father#child{width:100px;height:100px}#父層#子層{屬性1：屬性值；屬性2：屬性值}
父元素與子元素必須用空格分隔開，表示在父元素包含下的子元素。
示例程式碼：
<html><head><title>子元素選擇器</title><styletype="text/css">#father1{width:400px;height:400px;border:1pxsolid black;}#father1 div{background-color:green;}#father2{width:300px;width:200px;border:1px solid black;}#father2#p1{color:blue;}</style></head><body><div id="father1"><div>區域一子元素</div><div>區域二子元素</div></div><div id="father2"><p id="p1">內容</p><p id="p2">內容</p></div></body></html>
預覽瀏覽器後，我們會發現father1和father2都設定了寬度高度和邊框，然後使用father1 div，表示第一個div區域下的全部div，都設定背景色為綠色；而father2 p1則表示，第二個div區域下只有p1元素，設定了字型藍色，不影響其他的段落標籤。
相鄰選擇器：
相鄰選擇器，就是選中元素的下一個兄弟元素。在這裡注意一點，相鄰選擇器的操作物件是該元素的同級元素。
語法：
#friend+div {width:100px;height:100px;}#元素+相鄰元素 {width:100px;height:100px;}
示例程式碼：
<html><head><title>相鄰選擇器</title><styletype="text/css">#friend{width:200px;height:200px;border:1px solid black;}#friend+div{width:200px;height:200px;border:1px solid black;background-color:green;}</style></head><body><div>區域一</div><divid="friend">區域二</div><div>區域三</div></body></html>
使用#friend+div，表示與friend相鄰的div，也就是下一個兄弟元素，起作用，與上面的不起作用。
群組選擇器：
群組選擇器，就是同時對好幾個元素進行相同的操作。這個一般都是在對頁面元素進行預設值設定時使用的，便於管理，也減少冗餘程式碼。
語法：
h1,h3,div,p,span{margin:0;padding:0;}示例程式碼：
<html><head><title>群組選擇器</title><style>h3,p,div,span{background-color:green;color:white;}</style></head><body><h3>標題內容</h3><p>段落內容</p><div>分隔內容</div><span>行內容</span></body></html>
預覽瀏覽器後，大家會發現以上幾個元素，背景色均為綠色，字型色均為白色了，這個就是群組選擇器的作用。另外插一句，大家看綠色的大小會發現，h3，p，div都是block塊元素，而只有span是inline行元素。
以上分享的選擇器內容，基本覆蓋選擇器90%以上的內容了，也夠用了，其他那些更高階，更復雜的選擇器，今後學習高階教程時，再給大家分享。
