CSS 僞類選擇器

對css的僞類選擇器真的是又愛又恨，每次都很完美的被搞混了，仍是得作一下總結。

 

1.  :nth-of-type(n)   選擇第n個元素

1 <div class="box">
2     <p>1 永遠相信美好的事情</p>
3     <a>2 即將發生</a>
4     <p>3 永遠相信美好的事情</p>
5     <p>4 永遠相信美好的事情</p>
6     <a>5 即將發生</a>
7     <a>6 即將發生</a>
8 </div>

　　選擇第2個a元素，實用

　　a:nth-of-type(2){ background: red; }

 

 

2.  :last-of-type   選擇最後一個元素

<div class="box">
    <p>1 永遠相信美好的事情</p>
    <a>2 即將發生</a>
    <p>3 永遠相信美好的事情</p>
    <p>4 永遠相信美好的事情</p>
    <a>5 即將發生</a>
    <a>6 即將發生</a>
</div>

　　p:last-of-type{ background: red; }

 

 

3.  :first-of-type   選擇第一個元素

<div class="box">
    <p>1 永遠相信美好的事情</p>
    <a>2 即將發生</a>
    <p>3 永遠相信美好的事情</p>
    <p>4 永遠相信美好的事情</p>
    <a>5 即將發生</a>
    <a>6 即將發生</a>
</div>

　　a:first-of-type{ background: red; }

 

 

4.  :nth-child(n)   選擇父元素的第n個子元素

1 <div class="box">
2     <p>1 永遠相信美好的事情</p>
3     <a>2 即將發生</a>
4     <p>3 永遠相信美好的事情</p>
5     <p>4 永遠相信美好的事情</p>
6     <a>5 即將發生</a>
7     <a>6 即將發生</a>
8 </div>

　　第二個子元素必須爲 a ，不然無效

　　a:nth-child(2){ background: red; }

 

 

5.  :nth-last-child(n)   選擇父元素的倒數第n個子元素

1 <div class="box">
2     <p>1 永遠相信美好的事情</p>
3     <a>2 即將發生</a>
4     <p>3 永遠相信美好的事情</p>
5     <p>4 永遠相信美好的事情</p>
6     <a>5 即將發生</a>
7     <a>6 即將發生</a>
8 </div>

　　倒數第二個必須爲 a ，不然無效

　　a:nth-last-child(2){ background: red; }

 

 

6.  :nth-last-of-type(n)   選擇倒數的第n個元素

1 <div class="box">
2     <p>1 永遠相信美好的事情</p>
3     <a>2 即將發生</a>
4     <p>3 永遠相信美好的事情</p>
5     <p>4 永遠相信美好的事情</p>
6     <a>5 即將發生</a>
7     <a>6 即將發生</a>
8 </div>

　　選擇倒數的第2個p元素，更實用

　　p:nth-last-of-type(2){ background: red; }

 

 

7.  :last-child   選擇最後一個元素

 1 <div class="box">
 2     <p>1 永遠相信美好的事情</p>
 3     <a>2 即將發生</a>
 4     <p>3 永遠相信美好</p>
 5 </div>
 6 <div class="box">
 7     <a>1 永遠相信美好的事情</a>
 8     <p>2 即將發生</p>
 9     <a>3 永遠相信美好</a>
10 </div>
11 <div class="box">
12     <p>1 永遠相信美好的事情</p>
13     <p>2 即將發生</p>
14     <p>3 永遠相信美好</p>
15 </div>

　　選擇 p 元素的 父元素的 最後一個子元素，若是最後一個子元素不爲 p ，則無效 
　　p:last-child{ background: red; }

 

 

8.  :first-child   選擇第一個元素 與  :last-child 相對

 1 <div class="box">
 2     <p>1 永遠相信美好的事情</p>
 3     <a>2 即將發生</a>
 4     <p>3 永遠相信美好</p>
 5 </div>
 6 <div class="box">
 7     <a>1 永遠相信美好的事情</a>
 8     <p>2 即將發生</p>
 9     <p>3 永遠相信美好</p>
10 </div>
11 <div class="box">
12     <p>1 永遠相信美好的事情</p>
13     <p>2 即將發生</p>
14     <p>3 永遠相信美好</p>
15 </div>

　　選擇 p 元素的 父元素的 第一個子元素，若是第一個子元素不爲 p ，則無效

　　p:first-child{ background: red; }

 

 

9.  :only-of-type   選擇父元素中僅有一個子元素的元素

 1 <div>
 2     <p>永遠相信美好的事情即將發生</p>
 3     <span>世界上沒有什麼事情比學習更重要</span>
 4 </div>
 5 <div>
 6     <p>加油</p>
 7     <p>努力</p>
 8     <p>奮鬥</p>
 9 </div>
10 <div>
11     <span>世界上沒有什麼事情比學習更重要</span>
12     <p>永遠相信美好的事情即將發生</p>
13 </div>

　　選擇 p 的父元素的子元素中僅有一個爲 p 的元素

　　p:only-of-type{ background: red; }

 

 

10.  :only-child   選擇父元素中惟一一個子元素的元素

 1 <div>
 2     <p>永遠相信美好的事情即將發生</p>
 3     <span>世界上沒有什麼事情比學習更重要</span>
 4 </div>
 5 <div>
 6     <p>加油</p>
 7     <p>努力</p>
 8     <p>奮鬥</p>
 9 </div>
10 <div>
11     <p>永遠相信美好的事情即將發生</p>
12 </div>

　　選擇 p 的父元素的惟一一個子元素而且爲 p 的元素

　　p:only-child{ background: red; }

 

 

11.  :not(selector)   選擇selector之外的元素

 1 <ul>
 2     <li>123123</li>
 3     <li>123123</li>
 4     <p>pppppppp</p>
 5     <li>123123</li>
 6     <li>123123</li>
 7     <p>pppppppp</p>
 8     <div>divdiv</div>
 9     <li>123123</li>
10 </ul>

　　選擇li之外的元素

　　ul :not(li){ color: red; }

 

12.  :first-letter   選擇元素的第一字母/字符（只對塊級元素生效）

1     <p>永遠相信美好的事情即將發生</p>
2     <span>世界上沒有什麼事情比學習更重要</span>
3     <p>加油</p>
4     <p>努力</p>
5     <p>奮鬥</p>
6     <p>wsydxiangwang</p>

　　選 p 元素的第一個字符，只對塊級元素生效

　　p:first-letter{ font-size: 40px; background: red; }

 

13.  :first-line   選擇元素的第一行（只對塊級元素生效）

1     <p>永遠相信美好的事情即將發生,永遠相信美好的事情即將發生,永遠相信</p>
2     <span>世界上沒有什麼事情比學習更重要</span>
3     <p>wsydxiangwang</p>

　　選擇第一行的元素，只對塊級元素生效

　　p:first-line{ background: red; }

 https://www.cnblogs.com/xiaobaiv/p/9086235.html