css3 巧用結構性僞類選擇器

時間 2019-11-10

原文原文鏈接

最近在國外的一個網站上看到的一個關於結構性僞類選擇器的用法，以爲十分實用，就本身嘗試了一下，並把它給記錄下來：css

這是最基本的樣式：網站

 1 <style type="text/css">
 2     li{
 3         list-style-type: none;
 4         float: left;
 5         width: 60px;
 6         height: 60px;
 7         background-color: #979698;
 8         margin-left: 10px;
 9         text-align: center;
10         line-height: 60px;
11         border-radius: 50%;
13     }
14 </style>

body內的內容：spa

 1 <body>
 2  <ul>
 3      <li>第01個</li>
 4      <li>第02個</li>
 5      <li>第03個</li>
 6      <li>第04個</li>
 7      <li>第05個</li>
 8      <li>第06個</li>
 9      <li>第07個</li>
10      <li>第08個</li>
11      <li>第09個</li>
12      <li>第10個</li>
13      <li>第11個</li>
14  </ul>
15 </body>

首先是最基本的結構性僞類選擇器的用法：3d

1     li:nth-child(8){
2         background-color: #298EB2;
4     }

結果展現爲：code

利用:nth-child(n+6) 至關於:nth-child(6)及以上的li標籤元素：blog

1     li:nth-child(n+6){
2         background-color: #298EB2;
4     }

結果展現爲：class

同理利用:nth-child(-n+6) 至關於:nth-child(6)及如下的li標籤元素：原理

1     li:nth-child(-n+6){
2         background-color: #298EB2;
4     }

結果展現爲：bfc

根據以上原理咱們能夠來一些進階的：進階

好比能夠利用 nth-child(n+4):nth-child(-n+8) 達到獲取:nth-child(4)及以上和:nth-child(8)及如下的li標籤元素：

1     li:nth-child(n+4):nth-child(-n+8){
2         background-color: #298EB2;
3     }

結果展現爲：

還能夠利用 :nth-child(n+2):nth-child(odd):nth-child(-n+8) 獲取:nth-child(n+2)到:nth-child(-n+8)之間的單數li標籤元素：

1     li:nth-child(n+2):nth-child(odd):nth-child(-n+8){
2         background-color: #298EB2;
3     }

結果展現爲：

最後咱們還能夠利用:nth-child(3n+1)獲取數目爲一、四、七、10中的偶數li標籤元素：

1     li:nth-child(3n+1):nth-child(even){
2         background-color: #298EB2;
3     }

結果展現爲：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。