CSS（一）偽元素的巧用

entner 發布于2019-08-30 15:53 / 1906人閱讀

摘要：并且，一些偽元素可以使開發者獲取到不存在于源文檔中的內容比如常見的還可以為偽元素定制樣式。。中新增加的偽元素必須用偽類使用一個冒號例如。就本文而言，我們將把我們探討的范圍限制在和這兩個偽元素的巧用上。

作為一門前端er,你肯定熟知 a:hover ? ??a:visited.....我還記得在小本本上記著訣竅：“love 與 hate 糾纏不休”,大家都懂的吧。。。。

? ?????偽類和偽元素都是CSS1和CSS2中的概念，CSS1和CSS2中對偽類的偽元素的區別比較模糊，甚至經常有同行將:before、:after稱為偽類。CSS3對這兩個概念做了相對較清晰地概念，并且在語法上也很明顯的講二者區別開。

偽類————pseudo classes

CSS3對偽類的定義
? ?????偽類存在的意義是為了通過選擇器找到那些不存在與DOM樹中的信息以及不能被常規CSS選擇器獲取到的信息；任何常規選擇器可以在任何位置使用偽類。

CSS3對偽元素的定義
? ?????偽元素在DOM樹中創建了一些抽象元素，這些抽象元素是不存在于文檔語言里的（可以理解為html源碼）。比如：documen接口不提供訪問元素內容的第一個字或者第一行的機制，而偽元素可以使開發者可以提取到這些信息。并且，一些偽元素可以使開發者獲取到不存在于源文檔中的內容(比如常見的::before,::after)還可以為偽元素定制樣式。。

? ?????偽類用于將特殊的效果添加到某些選擇器。偽元素代表了某個元素的子元素，這個子元素雖然在邏輯上存在，但卻并不實際存在于文檔樹中;
? ?????CSS3中的偽元素使用兩個冒號例如::first-line（當然為了向下兼容，用一個冒號也是可以的，大多數瀏覽器都支持這兩種表示方式。CSS3中新增加的偽元素必須用::）,偽類使用一個冒號例如：hover。

巧用

? ?????所有偽元素能實現的，真實子元素都可以做到。只不過有時候單純是為了樣式和布局就改變html結構，這樣的做法不干凈，不值得提倡，所以偽元素有了用武之地。

就本文而言，我們將把我們探討的范圍限制在::before 和 ::after這兩個偽元素的巧用上。

1. 清除浮動

 #大家最熟悉的巧用
       
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  clear: both;
}

.clearfix { 
  *zoom:1;
}

2.為元素添加額外的符號

div:before {
 content: open-quote;
 font-size: 24pt;
 text-align: center;
 line-height: 42px;
 color: #fff;
 background: #ffffd;
 float: left;
 position: relative;
 top: 30px;
 border-radius: 25px;
 height: 25px;
 width: 25px;
}
div:after {
 content: close-quote;
 font-size: 24pt;
 text-align: center;
 line-height: 42px;
 color: #fff;
 background: #ffffd;
 float: right;
 position: relative;
 bottom: 40px;
 border-radius: 25px;
 height: 25px;
 width: 25px;
}

3. 接下來重點講解下結合動畫用偽元素實現以下效果

#html代碼

    
        
        
    

#css代碼
    *,
    *:before,
    *:after {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    img {
        display: block;
        }
    .dynamic-border {
        position: relative;
        width: 200px;
        height: 200px;
        background: gray;
        margin: 0 auto;
        cursor: pointer;
        }
            
    .dynamic-border:before,
    .dynamic-border:after,
    .dynamic-border span:first-child:before,
    .dynamic-border span:first-child:after { 
        content: "";
        position: absolute;
        background: red;
        -webkit-transition: all .2s ease;
        transition: all .2s ease;
        }
    /*上邊*/
    .dynamic-border:before {
        width: 0;
        top: -2px;
        right: 0;
        height: 2px;
        }
    /* 右邊*/
    .dynamic-border:after {
        width: 2px;
        height: 0;
        right: -2px;
        bottom: 0;
        }
    /*下邊 */
    .dynamic-border span:first-child:before {
        width: 0;
        height: 2px;
        bottom: -2px;
        left: 0;
        }
    .dynamic-border span:first-child:after {
        width: 2px;
        height: 0;
        top: 0;
        left: -2px;
        }
    .dynamic-border:hover:before,
    .dynamic-border:hover span:first-child:before { 
        -webkit-transition-delay: .2s;
        transition-delay: .2s;
        }
            
    .dynamic-border:hover:before,
    .dynamic-border:hover span:first-child:before {
        width: calc(100% + 2px);   
        }
        
    .dynamic-border:hover:after,
    .dynamic-border:hover span:first-child:after {
        height: calc(100% + 2px);
        }

解析

Q:原理圖?

Q1:為什么要在htm標簽中添加額外的標簽,而不用img::before?

img不支持元素::before和::after

Q2:為什么要為所有元素設置box-sizing: border-box;?

為使得calc(100%)計算值正好等于圖片的總寬高值，而不是內容的寬高值

Q3:為什么要設置transition-delay: .2s;

以原理圖中右下方.dynamic-border::after：為例，由于左下方span:after的動畫持續時間為.2s，所以設置.dynamic-border::after：transition-delay: .2s使得動畫平穩過渡更好地銜接sapn:after;

Q1:cal(100% + 2px)?

2px為紅色邊框寬度，注意+號前后必須要有空格

GPU云服務器云服務器巧用CSS的MASK濾鏡偽元素獲取偽元素 css元素

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

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

Proxy 的巧用

摘要：為了保證的可讀性，本文采用意譯而非直譯。對象的所有用法，都是上面的這種形式。其中用來生成實例，是表示所要攔截的對象，是用來定制攔截行為的對象。雖然不同的創建模式支持類似的功能，但無法用隱式初始值包裝對象。為了保證的可讀性，本文采用意譯而非直譯。想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你！ Proxy 介紹使用Proxy，你可以將一只貓偽裝成一只老虎。下面大...

feng409 2019-08-26 10:10 評論0 收藏0
Proxy 的巧用

摘要：為了保證的可讀性，本文采用意譯而非直譯。對象的所有用法，都是上面的這種形式。其中用來生成實例，是表示所要攔截的對象，是用來定制攔截行為的對象。雖然不同的創建模式支持類似的功能，但無法用隱式初始值包裝對象。為了保證的可讀性，本文采用意譯而非直譯。想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你！ Proxy 介紹使用Proxy，你可以將一只貓偽裝成一只老虎。下面大...

FreeZinG 2019-08-16 18:36 評論0 收藏0
異或運算的巧用 → 不用額外的變量，如何交換兩個變量的值？

摘要：開心一刻兩頭奶牛在一起吃草，其中一頭奶牛甲越吃越慢，一副若有所思的模樣，另一頭奶牛奶牛乙發覺了，開始了對話奶牛乙擱那合計啥呢奶牛甲你幫我合計合計奶牛乙咋地了奶牛甲我吃的是草，擠出來的是奶，也就是說我把沒用的變成有用的了奶牛乙是這個事奶牛甲人開心一刻　　兩頭奶牛在一起吃草，其中一頭（奶牛甲）越吃越慢，一副若有所思的模樣，另一頭奶牛（奶牛乙）發覺了，開始了對話　　奶牛乙：擱那合計啥呢？　　奶牛甲...

不知名網友 2021-11-29 10:50 評論0 收藏0
CSS3-transition常用屬性及示例

摘要：主要用來指定瀏覽器的過渡速度，以及過渡期間的操作進展情況，解釋下注意值可以中定義自己的值，如過渡效果開始前的延遲時間，單位秒或者毫秒與的巧用示例元素上浮示例元素上浮后續還會繼續補充，真心強大transition參數語法 transition: property duration timing-function delay transition屬性是個復合屬性，她包括以下幾個子屬性： ...

derek_334892 2019-04-23 13:41 評論0 收藏0
巧用margin/padding的百分比值實現高度自適應（多用于占位，避免閃爍）

摘要：那想要優化這一點，唯一的方法就是利用內容高度來撐開而非，這個方案跟消除浮動所用的方案非常相似給容器添加一個子元素偽元素，并把子元素偽元素的設為，使其實際高度相當于容器的寬度，如此一來，便能把容器的高度撐至與寬度一致了。一個基礎卻又容易混淆的css知識點本文依賴于一個基礎卻又容易混淆的css知識點：當margin/padding取形式為百分比的值時，無論是left/right，還是t...

wenzi 2019-08-28 18:28 評論0 收藏0