详解CSS中nth-child的用法.html 返回列表
<style>.demo_nth{height:28px;padding:20px;border:none;margin:0}
.demo_nth li{width:28px;height:28px;background:#aaa;border-radius:20px;float:left;margin:0 10px 0 0;_display:inline;list-style:none; text-indent:-9999px}
.demo_nth01 li:nth-child(2),.demo_nth02 li:nth-child(n+4),.demo_nth03 li:nth-child(-n+4),.demo_nth04 li:nth-child(2n),.demo_nth05 li:nth-child(2n-1),.demo_nth06 li:nth-child(3n+1),.demo_nth07 li:last-child,.demo_nth08 li:nth-last-child(3){background:#090}
.demo_nth01 li:nth-child(2){
background:#090
}</style>
<div class="entry">
<p>ǰ˵ĸضӴcssһ⣬ѡȡҪıǩʽDzǺܸǡ<strong>:nth-child</strong></p>
<p>ҽü͵ʵҽ:nth-childʵ;</p>
<p><strong>Tips：</strong>还用低版本的IE浏览器的哥们请绕过！</p>
<h2>:nth-child(2)ѡȡڼǩ2Ҫ֡</h2>
<ul class="demo_nth demo_nth01">
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
<pre>.demo01 li:nth-child(2){background:#090}</pre>
<h2>:nth-child(n+4)ѡȡڵ4ǩnʾͬ</h2>
<ul class="demo_nth demo_nth02">
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
<pre>.demo01 li:nth-child(n+4){background:#090}</pre>
<h2>:nth-child(-n+4)ѡȡСڵ4ǩ</h2>
<ul class="demo_nth demo_nth03">
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
<pre>.demo01 li:nth-child(-n+4){background:#090}</pre>
<h2>:nth-child(2n)ѡȡżǩ2nҲeven</h2>
<ul class="demo_nth demo_nth04">
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
<pre>.demo01 li:nth-child(2n){background:#090}</pre>
<h2>:nth-child(2n-1)ѡȡǩ2n-1odd</h2>
<ul class="demo_nth demo_nth05">
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
<pre>.demo01 li:nth-child(2n-1){background:#090}</pre>
<h2>:nth-child(3n+1)Զѡȡǩ3n+1ʾȡһ</h2>
<ul class="demo_nth demo_nth06">
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
<pre>.demo01 li:nth-child(3n+1){background:#090}</pre>
<h2>:last-childѡȡһǩ</h2>
<ul class="demo_nth demo_nth07">
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
<pre>.demo01 li:last-child{background:#090}</pre>
<h2>:nth-last-child(3)ѡȡڼǩ,3ʾѡȡ3</h2>
<ul class="demo_nth demo_nth08">
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
<pre>.demo01 li:nth-last-child(3){background:#090}</pre>
<p>ok，:nth-child的这些用法在实际中很用得着，不用单独给需要选取的标签加上ID或Class，是不是很拉轰！</p>
<p>תע<a href="http://www.daqianduan.com">ǰ</a> ? <a href="http://www.daqianduan.com/css-nth-child/">CSS:nth-child÷</a></p> </div>
Add New Content