CSS3實現子元素樣式選擇器,即通過上級元素選擇下級元素或特定下級元素的樣式。通過選定html標記里的某些元素來設置這些元素的一些屬性,這是CSS3核心的功能之一。而“子元素選擇器”在CSS3中被重點強化了,讓我們一起來看看如何使用它。
/* 基本語法 */ A B { 屬性設置值 } /* 使用示例 */ /* 設置h1元素下所有 span 元素的顏色為red */ h1 span { color: red; } /* 設置class為"b2"的 div 元素下所有a元素的樣式 */ div.b2 a { font-size: 18px; font-weight: 700; } /* 設置ul元素下所有li元素的樣式 */ ul li { border: 1px solid #ddd; margin: 10px; padding: 5px; }
子元素選擇器是通過將上級元素名稱與下級元素名稱相連的方式來實現的,適用于大多數的HTML標記,如div、ul、ol、h1、p等等。一般來說,使用子元素選擇器的目的是為了更方便地對一組元素進行樣式設置。
須注意的是,子元素選擇器只會選擇嵌套在父元素下的直接子元素,而不會選擇嵌套在嵌套元素之內的后代元素。例如:
/* 若html代碼如下 */ <div> <ul> <li> List item 1 </li> <li> List item 2 <ul> <li> Sub-list item 1 </li> <li> Sub-list item 2 </li> </ul> </li> <li> List item 3 </li> </ul> </div> /* 下面的CSS只會影響到 ul 直接下的 li 元素, 即 List item 1 、 List item 2 和 List item 3 */ div > ul > li { color: blue; }
應用子元素選擇器會比較實用,如果您覺得對你有幫助,就趕快去試試吧!