css 相鄰兄弟選擇器 3.結(jié)合其他選擇器
相鄰兄弟結(jié)合符還可以結(jié)合其他選擇器使用，下面一起來(lái)做一個(gè)稍微復(fù)雜點(diǎn)；IL的小練習(xí)。
【例題】結(jié)合使用選擇器
HTML代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html>body div+span,html>body hr+ul li{
color:red;
border:red solid 2px;
}
</style>
</head>
<body>
<div>一個(gè)div容器</div>
<span>一個(gè)span容器</span>
<hr/>
<ul>
<li>items1</li>
<li>items2</li>
<li>items3</li>
<li>items4</li>
</ul>
</body>
</html>
代碼中想以<html>根元素為起點(diǎn)，找到<div>元素后面的<span>元素和<hr/>元素后面的<ul>元 素下面的所有<li>元素，并且對(duì)它們?cè)O(shè)置CSS樣式，CSS代碼如下：
<style>
html>body div+span,html>body hr+ul li{
color:red;
border:red solid 2px;
}
</style>
上面這段CSS代碼使用了子元素選擇器、后代選擇器、集體選擇器和相鄰兄弟選擇器。CSS選擇 器代碼可以解釋為：從：<html>元素中找到一個(gè)叫做<body>的子元素，并且在<body>元素中找到所有后代為<div>的元素，接著從<div>元素的同級(jí)后面找到元素名為<span>的元素，第二個(gè)選擇器聲明解釋相同。
代碼運(yùn)行效果如圖所示。
湘公網(wǎng)安備:43011102000856號(hào) 
點(diǎn)擊加載更多評(píng)論>>