成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

前端面試題-偽元素的應(yīng)用

dreamans / 1162人閱讀

摘要：一偽元素的應(yīng)用清除浮動父元素中有子元素，并且父元素沒有設(shè)置高度，子元素在父元素中浮動，結(jié)果必然是父元素的高度為，這也就導(dǎo)致了父元素高度塌陷，我們就需要清除浮動。偽元素不會自然繼承自父元素如的樣式。

一、偽元素的應(yīng)用 1. 清除浮動

父元素中有子元素，并且父元素沒有設(shè)置高度，子元素在父元素中浮動，結(jié)果必然是父元素的高度為 0，這也就導(dǎo)致了父元素高度塌陷，我們就需要清除浮動。

給浮動元素的容器添加一個 clearfix 的 class，然后給這個 class 添加一個 :after 偽元素實現(xiàn)元素之后添加一個看不見的塊元素（Block element）清理浮動。

2. 分割線

HTML

分割線

CSS

.line::before, .line::after {
      content: "";
      display: inline-block;
      border-top: 1px solid black;
      width: 200px;
      margin: 5px;
}
3. 計數(shù)器

HTML


    a
    b
    c
    d
    e
    f
    g
    h
    i
    j



我選擇了個字母

CSS

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

.choose span:after {
      content: counter(letters);
}
3.1 CSS屬性說明 
counter-reset 屬性設(shè)置某個選擇器出現(xiàn)次數(shù)的計數(shù)器的值。默認(rèn)為 0。

說明：利用這個屬性，計數(shù)器可以設(shè)置或重置為任何值，可以是正值或負(fù)值。如果沒有提供 number，則默認(rèn)為 0。

注釋：如果使用 "display: none"，則無法重置計數(shù)器。如果使用 "visibility: hidden"，則可以重置計數(shù)器。

counter-increment 屬性設(shè)置某個選取器每次出現(xiàn)的計數(shù)器增量。默認(rèn)增量是 1。

說明：利用這個屬性，計數(shù)器可以遞增（或遞減）某個值，這可以是正值或負(fù)值。如果沒有提供 number 值，則默認(rèn)為 1。

注釋：如果使用了 "display: none"，則無法增加計數(shù)。如使用 "visibility: hidden"，則可增加計數(shù)。

4. 替代標(biāo)簽

HTML


    
    Hello World



Hello World

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

今天的心情:

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;     
}
二、使用偽元素注意的問題

在內(nèi)容模塊中提到，偽元素如果沒有設(shè)置 content 屬性，偽元素是無用的。

使用偽元素插入的內(nèi)容在頁面的源碼里是不可見的，只能在 CSS 里可見。

插入的元素在默認(rèn)情況下是內(nèi)聯(lián)元素（或者，在 HTML5 中，在文本語義的類別里）。因此，為了給插入的元素賦予高度，填充，邊距等等，你通常必須顯式地定義它是一個塊級元素。

還要注意的是典型的 CSS 繼承規(guī)則適用于插入的元素。例如，你有字體系列黑體，宋體，無襯線字體應(yīng)用到 body 元素里，然后偽元素會像其他元素一樣繼承這些字體系列。

偽元素不會自然繼承自父元素(如 padding margins )的樣式。

三、偽元素和偽類的區(qū)別

偽類選擇元素基于的是當(dāng)前元素處于的狀態(tài)，或者說元素當(dāng)前所具有的特性，而不是元素的 id、class、屬性等靜態(tài)的標(biāo)志。由于狀態(tài)是動態(tài)變化的，所以一個元素達(dá)到一個特定狀態(tài)時，它可能得到一個偽類的樣式；當(dāng)狀態(tài)改變時，它又會失去這個樣式。由此可以看出，它的功能和 class 有些類似，但它是基于文檔之外的抽象，所以叫偽類。

與偽類針對特殊狀態(tài)的元素不同的是，偽元素是對元素中的特定內(nèi)容進(jìn)行操作，它所操作的層次比偽類更深了一層，也因此它的動態(tài)性比偽類要低得多。實際上，設(shè)計偽元素的目的就是去選取諸如元素內(nèi)容第一個字（母）、第一行，選取某些內(nèi)容前面或后面這種普通的選擇器無法完成的工作。它控制的內(nèi)容實際上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文檔中，所以叫偽元素。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/51997.html

相關(guān)文章

  • 前端面試題-偽元素的應(yīng)用

    摘要：一偽元素的應(yīng)用清除浮動父元素中有子元素，并且父元素沒有設(shè)置高度，子元素在父元素中浮動，結(jié)果必然是父元素的高度為，這也就導(dǎo)致了父元素高度塌陷，我們就需要清除浮動。偽元素不會自然繼承自父元素如的樣式。 一、偽元素的應(yīng)用 1. 清除浮動 父元素中有子元素，并且父元素沒有設(shè)置高度，子元素在父元素中浮動，結(jié)果必然是父元素的高度為 0，這也就導(dǎo)致了父元素高度塌陷，我們就需要清除浮動。 給浮動元素的...

    tolerious 評論0 收藏0

  • 前端面試題-CSS選擇器

    摘要：一選擇器作用選擇器用于定位我們想要給予樣式的元素，但不只是在中，對的選擇器也是支持的，比如。在選被元素后插入內(nèi)容其用法和特性與相似。所有偽元素選擇器在前端面試題偽類和偽元素擴(kuò)展閱讀前端面試題清除浮動前端面試題塊格式化上下文 一、CSS選擇器作用 CSS 選擇器用于定位我們想要給予樣式的 HTML 元素，但不只是在 CSS 中，JavaScript 對 CSS 的選擇器也是支持的，比如 ...

    leanote 評論0 收藏0

  • 前端面試題-CSS選擇器

    摘要：一選擇器作用選擇器用于定位我們想要給予樣式的元素，但不只是在中，對的選擇器也是支持的，比如。在選被元素后插入內(nèi)容其用法和特性與相似。所有偽元素選擇器在前端面試題偽類和偽元素擴(kuò)展閱讀前端面試題清除浮動前端面試題塊格式化上下文 一、CSS選擇器作用 CSS 選擇器用于定位我們想要給予樣式的 HTML 元素，但不只是在 CSS 中，JavaScript 對 CSS 的選擇器也是支持的，比如 ...

    h9911 評論0 收藏0

  • 前端面試題-CSS選擇器

    摘要：一選擇器作用選擇器用于定位我們想要給予樣式的元素，但不只是在中，對的選擇器也是支持的，比如。在選被元素后插入內(nèi)容其用法和特性與相似。所有偽元素選擇器在前端面試題偽類和偽元素擴(kuò)展閱讀前端面試題清除浮動前端面試題塊格式化上下文 一、CSS選擇器作用 CSS 選擇器用于定位我們想要給予樣式的 HTML 元素，但不只是在 CSS 中，JavaScript 對 CSS 的選擇器也是支持的，比如 ...

    mingzhong 評論0 收藏0

  • 前端面試題-CSS優(yōu)先級

    摘要：優(yōu)先級是基于不同種類選擇器組成的匹配規(guī)則。但是，在內(nèi)部聲明的選擇器是會影響優(yōu)先級。當(dāng)兩條相互沖突的帶有規(guī)則的聲明被應(yīng)用到相同的元素上時，擁有更大優(yōu)先級的聲明將會被采用。擴(kuò)展閱讀前端面試題選擇器 一、選擇器優(yōu)先級 瀏覽器通過優(yōu)先級來判斷哪一些屬性值與一個元素最為相關(guān)，從而在該元素上應(yīng)用這些屬性值。優(yōu)先級是基于不同種類選擇器組成的匹配規(guī)則。 二、優(yōu)先級計算 優(yōu)先級就是分配給指定的CSS聲明...

    余學(xué)文 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<