#07你認真學了css？偽類和偽元素

farsun發表於2021-09-09
CSS

一、偽類：

1、定義

偽類用於當已有元素處於的某個狀態時，為其新增對應的樣式，這個狀態是根據使用者行為而動態變化

2、型別

圖片描述

image

3、應用場景

用偽類元素進行效果展示
（1）link  visited  hover  active 順序

/* 未訪問的連結 */
 a:link{  color: blue;  }  
a:visited{  color: green;  }  
/* 點選後滑鼠脫離，獲得焦點的連結 */ 
 a:focus{  color: grey;  }  /*滑鼠懸停時，內容顏色獲得紅色 */ 
 a:hover{  color: red;  } 
 /*選擇活動連結*/  a:active{  color: pink;  }

圖片描述

image

（2）first-child VS first-of-type

  • h1:first-child :選擇是h1並且它是長子的元素

  • h1:first-of-type:選擇是h1並且它是它父親裡h1型別中的長子的元素

    圖片描述

    image

關於first-childVSfirst-of-type的使用在之前的css系列部落格文章中有詳細解釋：

二、偽元素

1、定義

偽元素用於建立一些不在文件樹中的元素，併為其新增樣式

2、型別

圖片描述

image


如：


圖片描述

image

3、:before 和 :after（也可以寫::before和 ::after）

<div class="box">
    <p>這是第一段</p>
  </div>
  <style>
  .box:before{    content: 'start'
  }  .box:after{    content: 'end'
  }  </style>

圖片描述

image

使用偽元素before和after的好處：

  • 可以在後臺發現，p的前後分別出現::before和::after。html的dom樹中原本沒有::before和::after，現透過css樣式新增，使其在dom樹中新增這兩個元素。

  • 用新增::before和::after 的目的是為了省標籤。::before生成的效果，所在的位置位於父元素（如box）的第一個子元素，::after則位於父元素（如box）的最後一個子元素，即在html的dom樹上多了兩個子元素，這兩個子元素無需在html中體現，只需在css中表示即可。

  • ::before和::after所展示的效果相當於一個行內元素（注意行內元素的一些特性）

  • 其中content 是必不可少

4、偽類選擇器的應用場景

（1）偽類選擇器應用於清除浮動

.clearfix:after {    content:'';    display:block;    clear:both;
}

詳細解釋請回看之前我寫得關於浮動的副作用和解決辦法：

（2）偽類選擇器可作為替代標籤

用程式碼替代圖片，如使用css3實現一個帶邊框的三角符

思路：邊框+三角符號的組合

先確認邊框樣式：

.bubble{
            position: relative;
            padding: 10px;
            border-radius: 3px;  /*可填可不填*/
            background: #fff;
            border: 1px solid #000;     
                        display: inline-block; 
        }
<body>
    <div class="bubble">        hello world
    </div>
</body>

再確認三角樣式：

.bubble:before{
            content:'';
            width: 10px;
            height: 10px;
            border-left: 1px solid #000;
            border-top: 1px solid #000;
            background: #fff;
            display: inline-block;
                        position: absolute;
                        transform: rotateZ(45deg);  
                        top: -6px;
        }
<body>
    <div class="bubble">
        hello world
    </div>
</body>

這裡基礎的三角樣式我們在之前已經有涉及過怎麼使用：

請戳

使用偽元素怎麼實現三角符號（css3 ）：

基礎程式碼：（關於三角形的位置引數可以使用頁面後臺進行除錯）

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
         .bubble{  position: relative;  padding: 10px;  border-radius: 3px;  /*可填可不填*/  background: #fff;  border: 1px solid #000;  display: inline-block;  }  .bubble:before{  content:'';  width: 10px;  height: 10px;  border-left: 1px solid #000;  border-top: 1px solid #000;  background: #fff;  display: inline-block;  transform:  rotateZ(45deg);  position: absolute;  top: -6px;  } </style></head><body>
    <div class="bubble">
        hello world    </div></body></html>

結果：

圖片描述

image


運用以上知識舉一反三，實現以下效果：


圖片描述

image

程式碼請戳：

（3）偽類選擇器應用於element：checked;（勾選住的一個狀態）

即input元素的自定義重要屬性checkbox或者radio，實現一個自定義的樣式

如：笑臉切換

/*今天的心情:*/
 <input type="checkbox"><style>input[type=checkbox]{ 
 -webkit-appearance: none;  /*去掉未勾選的方框預設樣式*/  appearance: none;  background:  url() 0 0 no-repeat;  
display: inline-block; 
 width: 20px;  
height: 20px;  
background-size: contain;  /*背景圖片的大小*/  vertical-align: middle;  outline: none;  
}  /*勾選之後的狀態*/ 
 input[type=checkbox]:checked{  -webkit-appearance: none;  
appearance: none;  
background:  url() 0 0 no-repeat;  
display: inline-block;  
width: 20px;  
height: 20px;  
background-size: contain;  
vertical-align: middle; 
 } </style>

好處：

  • 沒有加js

  • 使用該屬性樣式，對於input來說已經實現勾選狀態，自定義加一些自己的圖片，自動載入資訊

（4）偽類選擇器應用於字型圖示

A、為什麼針對字型庫而來的字型，我們可以調整它的字型大小和顏色？


圖片描述

image

B、完整程式碼如下：

<!DOCTYPE html><html><head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_nyta5x5h650cnmi.css"></head><body>
  <span class="iconfont icon-jirengulogojichu2"></span>

  <style>
    .iconfont{  font-size: 100px;  color: red;  } </style></body></html>

在css中新增這個:

/*  e605為字型庫中的特有的一種編碼形式：unicode碼  */.icon-jirengulogojichu2：before{content:'e605';}

即：


圖片描述

image



作者：飢人谷_遠方
連結：


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/4289/viewspace-2817381/，如需轉載，請註明出處，否則將追究法律責任。

相關文章