CSS3結(jié)構(gòu)性偽類
- E:nth-child(n)表示E的父元素中的第n個子節(jié)點(diǎn)
從1開始他先找到父元素下面對應(yīng)子節(jié)點(diǎn)的個數(shù)渡讼，然后再找是否是E標(biāo)簽
他必須滿足2點(diǎn)第一點(diǎn)是E標(biāo)簽的元素彤枢，第二點(diǎn)是必須是第N個元素
<section>
<div>我是一個普通的div標(biāo)簽</div>
<span>我是一個普通的span標(biāo)簽</span>
<p>我是第1個p標(biāo)簽</p>
<p>我是第2個p標(biāo)簽</p> <!-- 希望這個變紅 -->
</section>
p:nth-child(odd){background:red;} //表示匹配奇數(shù)行
p:nth-child(even){background:red;} //表示匹配偶數(shù)行
p:nth-child(2n){background:red;} //里面是公式内列，n從0開始計算但是nth-child(0)他找不到践剂。所以從1才開始了
E:nth-last-child(n)表示E父元素中的第n個子節(jié)點(diǎn),從后向前計算
這個和nth-child(n)不一樣。他先找到的E標(biāo)簽然后再找到對應(yīng)的個數(shù)
- E:nth-last-of-type(n)表示E父元素的第n個節(jié)點(diǎn),且類型是E從后向前計算
- E:empty表示E元素中沒有子節(jié)點(diǎn).注意子節(jié)點(diǎn)包含文本節(jié)點(diǎn)
- E:first-child 表示E元素中第一個子節(jié)點(diǎn)
- E:last-child表示E元素中最后一個子節(jié)點(diǎn)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content="text/html; charset=utf-8">
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<title>CSS3結(jié)構(gòu)</title>
</head>
<style>
*{margin:0px;padding:0px;}
p:nth-child(1){background:red;}
p:nth-child(2){background:red;} /*這樣就找不到因為第二個元素不是P而是h1*/
p:nth-of-type(3){background:red;} /*這個就是找到P元素的父元素下面P標(biāo)簽的第三個*/
p:nth-last-child(1){background:blue;} /*這個表示倒數(shù)第一個*/
h1:nth-last-of-type(1){background:yellow;} /*這個表示找到里面的h1倒數(shù)第一個*/
</style>
<body>
<p>p1</p>
<h1>h1</h1>
<p>p2</p>
<h1>h2</h1>
<p>p3</p>
<h1>h3</h1>
<p></p>
<p>p5<span></span></p>
<p><span></span><a href="#">鏈接</a></p>
</body>
</html>
實例新浪頭部導(dǎo)航
2017-05-03_115109.jpg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新浪頭部導(dǎo)航</title>
<style>
.list {margin: 0; padding: 0; list-style: none;}
.list li {width: 150px; border-right: 1px solid #000; float: left;}
.list li:last-of-type {border: none;}
.list a {float: left; width: 40px; margin: 0 5px; font: 12px/30px "宋體"; text-align: center;}
.list li a:nth-of-type(3n+1) {font-weight: bold;}
.list li:nth-child(3) a:nth-child(2) {color: red;}
</style>
</head>
<body>
<ul class="list">
<li>
<a href="#">導(dǎo)航</a>
<a href="#">導(dǎo)航</a>
<a href="#">導(dǎo)航</a>
<a href="#">導(dǎo)航</a>
<a href="#">導(dǎo)航</a>
<a href="#">導(dǎo)航</a>
<a href="#">導(dǎo)航</a>
<a href="#">導(dǎo)航</a>
<a href="#">導(dǎo)航</a>
</li>
<li>
<a href="#">導(dǎo)航</a>
<a href="#">導(dǎo)航</a>
<a href="#">導(dǎo)航</a>
<a href="#">導(dǎo)航</a>
<a href="#">導(dǎo)航</a>
<a href="#">導(dǎo)航</a>
<a href="#">導(dǎo)航</a>
<a href="#">導(dǎo)航</a>
<a href="#">導(dǎo)航</a>
</li>
<li>
<a href="#">導(dǎo)航</a>
<a href="#">導(dǎo)航</a>
<a href="#">導(dǎo)航</a>
<a href="#">導(dǎo)航</a>
<a href="#">導(dǎo)航</a>
<a href="#">導(dǎo)航</a>
<a href="#">導(dǎo)航</a>
<a href="#">導(dǎo)航</a>
<a href="#">導(dǎo)航</a>
</li>
<li>
<a href="#">導(dǎo)航</a>
<a href="#">導(dǎo)航</a>
<a href="#">導(dǎo)航</a>
<a href="#">導(dǎo)航</a>
<a href="#">導(dǎo)航</a>
<a href="#">導(dǎo)航</a>
<a href="#">導(dǎo)航</a>
<a href="#">導(dǎo)航</a>
<a href="#">導(dǎo)航</a>
</li>
<li>
<a href="#">導(dǎo)航</a>
<a href="#">導(dǎo)航</a>
<a href="#">導(dǎo)航</a>
<a href="#">導(dǎo)航</a>
<a href="#">導(dǎo)航</a>
<a href="#">導(dǎo)航</a>
<a href="#">導(dǎo)航</a>
<a href="#">導(dǎo)航</a>
<a href="#">導(dǎo)航</a>
</li>
<li>
<a href="#">導(dǎo)航</a>
<a href="#">導(dǎo)航</a>
<a href="#">導(dǎo)航</a>
<a href="#">導(dǎo)航</a>
<a href="#">導(dǎo)航</a>
<a href="#">導(dǎo)航</a>
<a href="#">導(dǎo)航</a>
<a href="#">導(dǎo)航</a>
<a href="#">導(dǎo)航</a>
</li>
<li>
<a href="#">導(dǎo)航</a>
<a href="#">導(dǎo)航</a>
<a href="#">導(dǎo)航</a>
<a href="#">導(dǎo)航</a>
<a href="#">導(dǎo)航</a>
<a href="#">導(dǎo)航</a>
<a href="#">導(dǎo)航</a>
<a href="#">導(dǎo)航</a>
<a href="#">導(dǎo)航</a>
</li>
</ul>
</body>
</html>
