前端面試題-僞元素的應用

1、僞元素的應用

1. 清除浮動

父元素中有子元素，而且父元素沒有設置高度，子元素在父元素中浮動，結果必然是父元素的高度爲 0，這也就致使了父元素高度塌陷，咱們就須要清除浮動。

給浮動元素的容器添加一個 clearfix 的 class，而後給這個 class 添加一個 :after 僞元素實現元素以後添加一個看不見的塊元素（Block element）清理浮動。

2. 分割線

HTML

<p class="line">分割線</p>

CSS

.line::before, .line::after {
      content: '';
      display: inline-block;
      border-top: 1px solid black;
      width: 200px;
      margin: 5px;
}

3. 計數器

HTML

<div class="chooses">
    <input type="checkbox">a
    <input type="checkbox">b
    <input type="checkbox">c
    <input type="checkbox">d
    <input type="checkbox">e
    <input type="checkbox">f
    <input type="checkbox">g
    <input type="checkbox">h
    <input type="checkbox">i
    <input type="checkbox">j
</div>
<p class="choose">我選擇了<span></span>個字母</p>

CSS

.chooses {
      counter-reset: letters;
}
.chooses input:checked {
      counter-increment: letters;
}

.choose span:after {
      content: counter(letters);
}

3.1 CSS屬性說明

counter-reset 屬性設置某個選擇器出現次數的計數器的值。默認爲 0。

• 說明：利用這個屬性，計數器能夠設置或重置爲任何值，能夠是正值或負值。若是沒有提供 number，則默認爲 0。
• 註釋：若是使用 "display: none"，則沒法重置計數器。若是使用 "visibility: hidden"，則能夠重置計數器。

counter-increment 屬性設置某個選取器每次出現的計數器增量。默認增量是 1。

• 說明：利用這個屬性，計數器能夠遞增（或遞減）某個值，這能夠是正值或負值。若是沒有提供 number 值，則默認爲 1。
• 註釋：若是使用了 "display: none"，則沒法增長計數。如使用 "visibility: hidden"，則可增長計數。

4. 替代標籤

HTML

<div class="tooltip">
    <span class="caret"></span>
    Hello World
</div>
<div class="bubble">Hello World</div>

CSS

.tooltip, 
.bubble{
      position: relative;
      padding: 10px;
      border-radius: 3px;
      background: #fff;
      border: 1px solid #000;
      display: inline-block;
}
.tooltip .caret,
.bubble:before{
      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;
}
.bubble:before{
      content:''
}

5. 自定義 checkbox

HTML

今天的心情: <input type="checkbox">

CSS

input[type=checkbox]{
    -webkit-appearance: none;
    appearance: none;
    background: url(http://7xpvnv.com2.z0.glb.qiniucdn.com/b6dcd011-23cc-4d95-9e51-9f10100103bd.png) 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(http://7xpvnv.com2.z0.glb.qiniucdn.com/538f26f0-6f3e-48d5-91e6-5b5bb730dd19.png) 0 0 no-repeat;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: contain;
    vertical-align: middle;     
}

2、使用僞元素注意的問題

1. 在內容模塊中提到，僞元素若是沒有設置 content 屬性，僞元素是無用的。
2. 使用僞元素插入的內容在頁面的源碼裏是不可見的，只能在 CSS 裏可見。
3. 插入的元素在默認狀況下是內聯元素（或者，在 HTML5 中，在文本語義的類別裏）。所以，爲了給插入的元素賦予高度，填充，邊距等等，你一般必須顯式地定義它是一個塊級元素。
4. 還要注意的是典型的 CSS 繼承規則適用於插入的元素。例如，你有字體系列黑體，宋體，無襯線字體應用到 body 元素裏，而後僞元素會像其餘元素同樣繼承這些字體系列。
5. 僞元素不會天然繼承自父元素(如 padding margins )的樣式。

3、僞元素和僞類的區別

僞類選擇元素基於的是當前元素處於的狀態，或者說元素當前所具備的特性，而不是元素的 id、class、屬性等靜態的標誌。因爲狀態是動態變化的，因此一個元素達到一個特定狀態時，它可能獲得一個僞類的樣式；當狀態改變時，它又會失去這個樣式。由此能夠看出，它的功能和 class 有些相似，但它是基於文檔以外的抽象，因此叫僞類。

與僞類針對特殊狀態的元素不一樣的是，僞元素是對元素中的特定內容進行操做，它所操做的層次比僞類更深了一層，也所以它的動態性比僞類要低得多。實際上，設計僞元素的目的就是去選取諸如元素內容第一個字（母）、第一行，選取某些內容前面或後面這種普通的選擇器沒法完成的工做。它控制的內容實際上和元素是相同的，可是它自己只是基於元素的抽象，並不存在於文檔中，因此叫僞元素。