css3關係選擇器有4種：1、包含選擇器“E F”，選擇所有被E元素包含的F元素；2、子代選擇器“E>F”，選擇所有作為E元素的直接子元素F；3、相鄰選擇器“E F”，選擇緊接E元素後的F元素；4、兄弟選擇器“E~F”。 本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。 CSS3中的關係選擇器主要包括包含選擇器、子代選擇器、相鄰選擇器和兄弟選擇器： 包含選擇器由符號空格“ ”連接 子代選擇器由符號“>”連接 相鄰選擇器由符號「 」連接 兄弟選擇器由符號「～」連接 #下面我們將詳細講解一下。 包含選擇器（E F） 選擇所有被E元素包含的F元素，中間用空格隔開ul li{color:green;} 宝马 奔驰 奥迪 CSS3子代選擇器(E>F) 子代選擇器主要用來選擇某個元素的第一級子元素。例如希望選擇只作為h1元素子元素的strong元素，可以這樣寫：h1> strong。 下面透過一個案例對子代選擇器(>)的用法進行演示，如圖所示： nbsp;html> CSS3子代选择器用法 h1 > strong { color: red; font-size: 20px; font-family: "微软雅黑"; } 这个知识点很重要 PHP中文网欢迎你！ 在上述程式碼中，第15行程式碼中的strong元素為h1元素的子元素，第16行程式碼中的strong元素為h1元素的孫元素，因此程式碼中設定的樣式只對第15行程式碼有效。 CSS3兄弟選擇器(E F) 此選擇器使用加號「」來連結前後兩個選擇器。選擇器中的兩個元素有同一個父親，而第二個元素必須緊跟著第一個元素。 下面透過一個案例對臨近兄弟選擇器的用法進行示範。 nbsp;html> CSS3紧邻兄弟选择器用法 p + h2{ color: green; font-family: "宋体"; font-size: 20px; } 《赠汪伦》 李白乘舟将欲行， 忽闻岸上踏歌声。 桃花潭水深千尺， 不及汪伦送我情。 在上述程式碼中，第7～11行程式碼用於為p元素後緊鄰的第一個兄弟元素h2定義樣式。從結構中看出p元素後緊鄰的第一個兄弟元素所在位置為第17行程式碼，因此第17行程式碼的文字內容將以所定義好的樣式顯示。 從圖中可以看出，只有緊接p元素的h2元素應用了程式碼中設定的樣式。 CSS3相鄰選擇器(E~F) 一般兄弟選擇器使用「～」來連結前後兩個選擇器。找出某一個指定元素的後面的所有兄弟結點。 下面透過一個案例對普通兄弟選擇器的用法進行演示，如下所示。 CSS3普通兄弟选择器~用法 p ~ h2{ color: pink; font-family: "微软雅黑"; font-size: 20px; } 《赠汪伦》 李白乘舟将欲行， 忽闻岸上踏歌声。 桃花潭水深千尺， 不及汪伦送我情。 從圖中可以看出，p元素後面的所有兄弟元素h2都套用了程式碼中所設定的樣式。 （學習影片分享：css影片教學）
