日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
這些CSS偽類，你可能還不知道，可以用起來了！

css 偽類是用于向某些選擇器添加特殊的效果，是動態(tài)的，指當前元素所處的狀態(tài)或者特性。只有一個元素達到一個特定狀態(tài)時，它可能得到一個偽類的樣式;當狀態(tài)改變時，它又會失去這個樣式。

我們提供的服務有：成都網(wǎng)站建設、網(wǎng)站建設、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認證、江都ssl等。為1000多家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務，是有科學管理、有技術的江都網(wǎng)站制作公司

這篇文章在一定程度上鼓勵你在構建UI時使用更簡單的CSS和更少的 JS。熟悉 CSS 所提供的一切是實現(xiàn)這一目標的一種方法，另一種方法是實現(xiàn)最佳實踐并盡可能多地重用代碼。

接下介紹一些大家可能還不熟悉的一些偽類及其用例，希望對大家日后有所幫助。

::first-line | 選擇文本的第一行

::first-line 偽元素在某塊級元素的第一行應用樣式。第一行的長度取決于很多因素，包括元素寬度，文檔寬度和文本的文字大小。

::first-line 偽元素只能在塊容器中,所以,::first-line偽元素只能在一個display值為block, inline-block, table-cell 或者 table-caption中有用。在其他的類型中，::first-line 是不起作用的。

用法如下：

 
 
 
 
    
  
  
  
  
  1. p:first-line { 
    2. 
  
  
  
  
  2.   color: lightcoral; 
    3. 
  
  
  
  
  3. } 
    4.

::first-letter | 選擇這一行的第一字

CSS 偽元素 ::first-letter會選中某塊級元素第一行的第一個字母。用法如下：

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3. 前端小智，不斷努，終身學習者！
     
    4.

::selection| 被用戶高亮的部分

::selection 偽元素應用于文檔中被用戶高亮的部分(比如使用鼠標或其他選擇設備選中的部分)。

 
 
 
 
    
  
  
  
  
  1. div::selection { 
    2. 
  
  
  
  
  2.       color: #409EFF; 
    3. 
  
  
  
  
  3. } 
    4.

:root | 根元素

:root 偽類匹配文檔樹的根元素。對于 HTML 來說，:root 表示 元素，除了優(yōu)先級更高之外，與 html 選擇器相同。

在聲明全局 CSS 變量時 :root 會很有用：

 
 
 
 
    
  
  
  
  
  1. :root { 
    2. 
  
  
  
  
  2.   --main-color: hotpink; 
    3. 
  
  
  
  
  3.   --pane-padding: 5px 42px; 
    4. 
  
  
  
  
  4. } 
    5.

:empty | 僅當子項為空時才有作用

:empty 偽類代表沒有子元素的元素。子元素只可以是元素節(jié)點或文本(包括空格),注釋或處理指令都不會產生影響。

 
 
 
 
    
  
  
  
  
  1. div:empty { 
    2. 
  
  
  
  
  2.   border: 2px solid orange; 
    3. 
  
  
  
  
  3.   margin-bottom: 10px; 
    4. 
  
  
  
  
  4. } 
    5. 
  
  
  
  
  5.  
    6. 
  
  
  
  
  6.  
    7. 
  
  
  
  
  7.  
    8. 
  
  
  
  
  8.  
    9.
 

只有第一個和第二個div有作用，因為它們確實是空的，第三個 div 沒有作用，因為它有一個換行。

:only-child | 只有一個子元素才有作用

:only-child 匹配沒有任何兄弟元素的元素.等效的選擇器還可以寫成 :first-child:last-child或者:nth-child(1):nth-last-child(1),當然,前者的權重會低一點。

 
 
 
 
    
  
  
  
  
  1. p:only-child{ 
    2. 
  
  
  
  
  2.   background: #409EFF; 
    3. 
  
  
  
  
  3. } 
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5.  
    6. 
  
  
  
  
  6.   
    第一個沒有任何兄弟元素的元素
     
    7.
 
  •  
  •   

    第二個

     
  •   

    第二個

     
  •  

    第一個沒有任何兄弟元素的元素

    :first-of-type | 選擇指定類型的第一個子元素

    :first-of-type表示一組兄弟元素中其類型的第一個元素。

     
 
 
 
      
  
  
  
  
    1. .innerDiv p:first-of-type { 
      2. 
  
  
  
  
    2.   color: orangered; 
      3. 
  
  
  
  
    3. } 
      4.

    上面表示將 .innerDiv 內的第一個元素為 p 的顏色設置為橘色。

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.     
      Div1
       
      3. 
  
  
  
  
    3.     
      These are the necessary steps
       
      4. 
  
  
  
  
    4.     
      hiya
       
      5. 
  
  
  
  
    5.      
      6. 
  
  
  
  
    6.     
       
      7. 
  
  
  
  
    7.         Do not push the brake at the same time as the accelerator. 
      8. 
  
  
  
  
    8.     
       
      9. 
  
  
  
  
    9.     
      Div2
       
      10.
     

    :last-of-type | 選擇指定類型的最后一個子元素

    :last-of-type CSS 偽類 表示了在(它父元素的)子元素列表中，最后一個給定類型的元素。當代碼類似Parent tagName:last-of-type的作用區(qū)域包含父元素的所有子元素中的最后一個選定元素，也包括子元素的最后一個子元素并以此類推。

     
 
 
 
      
  
  
  
  
    1. .innerDiv p:last-of-type { 
      2. 
  
  
  
  
    2.     color: orangered; 
      3. 
  
  
  
  
    3. } 
      4.

    上面表示將 .innerDiv 內的的最后一個元素為 p 的顏色設置為橘色。

    nth-of-type() | 選擇指定類型的子元素

    :nth-of-type() 這個 CSS 偽類是針對具有一組兄弟節(jié)點的標簽, 用 n 來篩選出在一組兄弟節(jié)點的位置。

     
 
 
 
      
  
  
  
  
    1. .innerDiv p:nth-of-type(1) { 
      2. 
  
  
  
  
    2.     color: orangered; 
      3. 
  
  
  
  
    3. } 
      4. 
  
  
  
  
    4.  
      5. 
  
  
  
  
    5.  
      6. 
  
  
  
  
    6.   
      Div1
       
      7. 
  
  
  
  
    7.   
      These are the necessary steps
       
      8. 
  
  
  
  
    8.   
      hiya
       
      9. 
  
  
  
  
    9.    
      10. 
  
  
  
  
    10.   
       
      11. 
  
  
  
  
    11.       Do not push the brake at the same time as the accelerator. 
      12. 
  
  
  
  
    12.   
       
      13. 
  
  
  
  
    13.   
      Div2
       
      14.
     

    :nth-last-of-type() | 在列表末尾選擇類型的子元素

    :nth-last-of-type(an+b) 這個 CSS 偽類 匹配那些在它之后有 an+b-1 個相同類型兄弟節(jié)點的元素，其中 n 為正值或零值。它基本上和 :nth-of-type 一樣，只是它從結尾處反序計數(shù)，而不是從開頭處。

     
 
 
 
      
  
  
  
  
    1. .innerDiv p:nth-last-of-type(1) { 
      2. 
  
  
  
  
    2.     color: orangered; 
      3. 
  
  
  
  
    3. } 
      4.

    這會選擇innerDiv元素中包含的類型為p元素的列表中的最后一個子元素。

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.     
      These are the necessary steps
       
      3. 
  
  
  
  
    3.     
      hiya
       
      4. 
  
  
  
  
    4.     
      Div1
       
      5. 
  
  
  
  
    5.     
       
      6. 
  
  
  
  
    6.         Do the same. 
      7. 
  
  
  
  
    7.     
       
      8. 
  
  
  
  
    8.     
      Div2
       
      9.
     

    :link | 選擇一個未訪問的超鏈接

    :link偽類選擇器是用來選中元素當中的鏈接。它將會選中所有尚未訪問的鏈接，包括那些已經(jīng)給定了其他偽類選擇器的鏈接(例如:hover選擇器，:active選擇器，:visited選擇器)。

    為了可以正確地渲染鏈接元素的樣式，:link偽類選擇器應當放在其他偽類選擇器的前面，并且遵循LVHA的先后順序，即：:link — :visited — :hover — :active。:focus偽類選擇器常伴隨在:hover偽類選擇器左右，需要根據(jù)你想要實現(xiàn)的效果確定它們的順序。

     
 
 
 
      
  
  
  
  
    1. a:link { 
      2. 
  
  
  
  
    2.     color: orangered; 
      3. 
  
  
  
  
    3. } 
      4. 
  
  
  
  
    4. Login 
      5.

    :checked | 選擇一個選中的復選框

    :checked CSS 偽類選擇器表示任何處于選中狀態(tài)的「radio」(), 「checkbox」 () 或("select") 元素中的「option」 HTML元素("option")。

      
  
 
 
      
   
   
  
  
    1. input:checked { 
      2. 
   
   
  
  
    2.   box-shadow: 0 0 0 3px hotpink; 
      3. 
   
   
  
  
    3. } 
      4. 
   
   
  
  
    4.  
      5. 
   
   
  
  
    5.  
      6.

    :valid | 選擇一個有效的元素

    :valid CSS 偽類表示內容驗證正確的 或其他

    元素。這能簡單地將校驗字段展示為一種能讓用戶辨別出其輸入數(shù)據(jù)的正確性的樣式。

      
 
 
 
      
   
  
  
  
    1. input:valid { 
      2. 
   
  
  
  
    2.   box-shadow: 0 0 0 3px hotpink; 
      3. 
   
  
  
  
    3. } 
      4.

    :invalid | 選擇一個無效的元素

    :invalid CSS 偽類 表示任意內容未通過驗證的 或其他 元素。

      
 
 
 
      
   
  
  
  
    1. input[type="text"]:invalid { 
      2. 
   
  
  
  
    2.     border-color: red; 
      3. 
   
  
  
  
    3. } 
      4.

    :lang() | 通過指定的lang值選擇一個元素

    :lang() CSS 偽類基于元素語言來匹配頁面元素。

      
 
 
 
      
   
  
  
  
    1. /* 選取任意的英文（en)段落 */ 
      2. 
   
  
  
  
    2. p:lang(en) { 
      3. 
   
  
  
  
    3.   quotes: '\201C' '\201D' '\2018' '\2019'; 
      4. 
   
  
  
  
    4. } 
      5.

    :not() | 用來匹配不符合一組選擇器的元素

    CSS 偽類 :not() 用來匹配不符合一組選擇器的元素。由于它的作用是防止特定的元素被選中，它也被稱為反選偽類(negation pseudo-class)。

    來看一個例子：

      
 
 
 
      
   
  
  
  
    1. .innerDiv :not(p) { 
      2. 
   
  
  
  
    2.     color: lightcoral; 
      3. 
   
  
  
  
    3. } 
      4. 
   
  
  
  
    4.  
      5. 
   
  
  
  
    5.     
      Paragraph 1
       
      6. 
   
  
  
  
    6.     
      Paragraph 2
       
      7. 
   
  
  
  
    7.     
      Div 1
       
      8. 
   
  
  
  
    8.     
      Paragraph 3
       
      9. 
   
  
  
  
    9.     
      Div 2
       
      10.
     

    Div 1 和 Div 2會被選中，p 不會被選 中。

    本文轉載自微信公眾號「大遷世界」，可以通過以下二維碼關注。轉載本文請聯(lián)系大遷世界公眾號。


    文章題目：這些CSS偽類，你可能還不知道，可以用起來了！
    文章地址：    http://www.5511xx.com/article/dhiscgj.html