CSS后代選擇器是很常見的一個選擇器,它可以讓我們通過對某個元素下一級或多級的子元素進行選擇,并對其進行樣式設置。
/* 語法格式 */ 父元素 子元素 { 屬性: 值; } /* 示例 */ ul li { margin-left: 20px; }
在上面的示例中,我們選中了`ul`元素下的所有`li`元素,并對它們設置了`margin-left: 20px`的樣式。當我們在HTML中使用如下代碼:
<ul> <li>第一項</li> <li>第二項</li> <li>第三項</li> </ul>
那么第一項、第二項、第三項這三個`li`元素都會應用上面的樣式。
CSS后代選擇器還可以進行多級選擇,比如:
/* 選中祖先元素下的子子孫孫元素 */ 祖先元素 子元素 孫元素 孫孫元素 { 屬性: 值; } /* 示例 */ body div ul li a { color: #333; }
在這個示例中,我們選中了`body`元素下的所有`div`,它們下面的所有`ul`元素,以及`ul`元素下的所有`li`和`a`元素,并為這些`a`元素設置了`color: #333`顏色樣式。
這樣,在HTML中類似下面的代碼:
<body> <div> <ul> <li><a href="#">鏈接1</a></li> <li><a href="#">鏈接2</a></li> </ul> </div> </body>
那么`鏈接1`和`鏈接2`就都會被應用上述樣式。