国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

tolerious / 1776人閱讀

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

一、偽元素的應用 1. 清除浮動

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

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

2. 分割線

HTML

分割線

CSS

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

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 屬性設置某個選擇器出現次數的計數器的值。默認為 0。

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

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

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

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

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

4. 替代標簽

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

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

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

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

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

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

三、偽元素和偽類的區別

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115812.html

相關文章

  • 前端面試題-偽元素的應用

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

    dreamans 評論0 收藏0

  • 前端面試題-CSS選擇器

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

    leanote 評論0 收藏0

  • 前端面試題-CSS選擇器

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

    h9911 評論0 收藏0

  • 前端面試題-CSS選擇器

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

    mingzhong 評論0 收藏0

  • 前端面試題-CSS優先級

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

    余學文 評論0 收藏0

發表評論

0條評論

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