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

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

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

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

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

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

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

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

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

::first-line 偽元素只能在塊容器中,所以,::first-line偽元素只能在一個(gè)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會(huì)選中某塊級(jí)元素第一行的第一個(gè)字母。用法如下：

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3. 前端小智，不斷努，終身學(xué)習(xí)者！
     
    4.

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

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

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

:root | 根元素

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

在聲明全局 CSS 變量時(shí) :root 會(huì)很有用：

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

:empty | 僅當(dāng)子項(xiàng)為空時(shí)才有作用

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

 
 
 
 
    
  
  
  
  
  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.
 

只有第一個(gè)和第二個(gè)div有作用，因?yàn)樗鼈兇_實(shí)是空的，第三個(gè) div 沒(méi)有作用，因?yàn)樗幸粋€(gè)換行。

:only-child | 只有一個(gè)子元素才有作用

:only-child 匹配沒(méi)有任何兄弟元素的元素.等效的選擇器還可以寫成 :first-child:last-child或者:nth-child(1):nth-last-child(1),當(dāng)然,前者的權(quán)重會(huì)低一點(diǎn)。

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

    第二個(gè)

     
  •   

    第二個(gè)

     
  •  

    第一個(gè)沒(méi)有任何兄弟元素的元素

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

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

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

    上面表示將 .innerDiv 內(nèi)的第一個(gè)元素為 p 的顏色設(shè)置為橘色。

     
 
 
 
      
  
  
  
  
    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 | 選擇指定類型的最后一個(gè)子元素

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

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

    上面表示將 .innerDiv 內(nèi)的的最后一個(gè)元素為 p 的顏色設(shè)置為橘色。

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

    :nth-of-type() 這個(gè) CSS 偽類是針對(duì)具有一組兄弟節(jié)點(diǎn)的標(biāo)簽, 用 n 來(lái)篩選出在一組兄弟節(jié)點(diǎn)的位置。

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

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

    這會(huì)選擇innerDiv元素中包含的類型為p元素的列表中的最后一個(gè)子元素。

     
 
 
 
      
  
  
  
  
    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 | 選擇一個(gè)未訪問(wèn)的超鏈接

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

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

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

    :checked | 選擇一個(gè)選中的復(fù)選框

    :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 | 選擇一個(gè)有效的元素

    :valid CSS 偽類表示內(nèi)容驗(yàn)證正確的 或其他

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

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

    :invalid | 選擇一個(gè)無(wú)效的元素

    :invalid CSS 偽類 表示任意內(nèi)容未通過(guò)驗(yàn)證的 或其他 元素。

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

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

    :lang() CSS 偽類基于元素語(yǔ)言來(lái)匹配頁(yè)面元素。

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

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

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

    來(lái)看一個(gè)例子：

      
 
 
 
      
   
  
  
  
    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會(huì)被選中，p 不會(huì)被選 中。

    本文轉(zhuǎn)載自微信公眾號(hào)「大遷世界」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系大遷世界公眾號(hào)。


    網(wǎng)頁(yè)名稱：這些CSS偽類，你可能還不知道，可以用起來(lái)了！
    分享鏈接：    http://m.5511xx.com/article/dhiscgj.html