巧用偽元素和偽類讓我們的html結構更清晰合理

風暴阿呆發表於2017-12-14
原文網址 : https://juejin.im/post/5a31f6775188256e174e192c
HTML

css3為了區分偽類和偽元素，偽元素採用雙冒號寫法。

偽類 -- :hover, :link, :active, :visited, :first-child, :last-child, nth-child(n), :not(), :focus
偽元素 -- ::before, ::after, ::first-letter, ::first-line, ::selection
複製程式碼

偽元素： [ 偽元素用於向某些選擇器設定特殊效果，簡單來說，偽元素建立了一個虛擬容器，這個容器不包含任何DOM元素，但是可以包含內容，我們可以為偽元素定製樣式 ]

::first-letter -- 用於選取指定選擇器的首字母（eg. 設定指定選擇器的首字母為大寫紅色）

p:first-letter 
{
    color: #f00;
    font-size: 32px;
    text-transform: capitalize;
}
複製程式碼
巧用偽元素和偽類讓我們的html結構更清晰合理
偽元素 ::first-letter

::first-line -- 用於選取指定選擇器的首行（eg. 設定指定選擇器的首行背景色為紅色）

p:first-line 
{
   color: #fff;
   background: #f00;
}
複製程式碼
巧用偽元素和偽類讓我們的html結構更清晰合理
偽元素 ::first-line

::selection -- 用於匹配被使用者選取的部分（eg. 設定被選中的文字為紅色字型）

p::selection
{
    color:#f00;
}
p::-moz-selection
{
    color:#f00;
}
複製程式碼
巧用偽元素和偽類讓我們的html結構更清晰合理
偽元素 ::selection

::before -- 在指定選擇器的內容前面插入內容（eg. 在被選元素的內容之前插入新內容）
::after -- 在指定選擇器的內容後面插入內容（eg. 在被選元素的內容之後插入新內容）

巧用 ::after/::before 偽元素製作CheckBox開關按鈕
HTML部分：
<label class="agreeBtn">
    <input type="checkbox" checked />
    <span class="active"></span>
    I agree with <a href="/">terms&amp;conditions</a>
</label>

CSS部分：
.agreeBtn {
    position: relative;
}
.agreeBtn input {
    opacity: 0;
}
.agreeBtn span {
    position: relative;
    display: inline-block;
    left: -10px;
    top: 6px;
    width: 36px;
    height: 20px;
    border-radius: 30px;
    background-color: #eee;
    -webkit-transition: background-color .3s;
    -moz-transition: background-color .3s;
    -ms-transition: background-color .3s;
    -o-transition: background-color .3s;
    transition: background-color .3s;
}
.agreeBtn span.active {
    background-color: #999;
}
.agreeBtn span::after {
    position: absolute;
    content: '';
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    box-shadow: 1px 0 3px rgba(0,0,0,0.1);
    background-color: #fff;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
}
.agreeBtn span.active::after {
    -ms-transform: translateX(16px);
    -moz-transform: translateX(16px);
    -webkit-transform: translateX(16px);
    -o-transform: translateX(16px);
    transform: translateX(16px);
}
複製程式碼
巧用偽元素和偽類讓我們的html結構更清晰合理
巧用 ::after/::before 偽元素製作CheckBox開關按鈕
巧用 ::after/::before 偽元素更改select 元素的預設樣式
HTML部分：
<div class="user_select">
  <select class="form-control">
    <option value="PhD" selected="selected">PhD</option>
    <option value="PhD Candidate">PhD Candidate</option>
    <option value="Master">Master</option>
    <option value="Master Candidate">Master Candidate</option>
    <option value="Bachelor">Bachelor</option>
    <option value="None">None</option>
  </select>
</div>

CSS部分：
.usermr_content select{
    appearance: none;
    -moz-appearance: none; 
    -webkit-appearance: none; 
}
.user_select{
    position: relative;
}
.user_select::after{
    position: absolute;
    content: '';
    right: 5px;
    top: 11px;
    border-top: 6px solid #666;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
}
複製程式碼
巧用偽元素和偽類讓我們的html結構更清晰合理
巧用 ::after/::before 偽元素更改select 元素的預設樣式
巧用 ::after/::before 偽元素製作左右按鈕
HTML部分：
<span class="btn leftBtn"></span>
<span class="btn rightBtn"></span>

CSS部分：
.btn{
    position: relative;
    display: block;
    width: 42px;
    height: 42px;
    border-radius: 2px;
    background-color: #36403f;
}
.btn:hover{
    background-color: #f55362;
}
.btn::after{
    position: absolute;
    content: '';
    top: 10px;
    left: 15px;
    borde: 10px solid transparent;
}
.leftBtn::after {
    border-right-color: #fff;
}
.rightBtn::after {
    border-left-color: #fff;
}
複製程式碼
巧用偽元素和偽類讓我們的html結構更清晰合理
巧用 ::after/::before 偽元素製作左右按鈕
巧用 ::after/::before 偽元素實現立體按鈕效果
HTML部分：
<div class="loginBtn"><input type="button" value="登 錄"></div>

CSS部分：
.loginBtn input {
    width: 100%;
    height: 50px;
    border-radius: 4px;
    box-shadow: 0 0 4px rgba(0,0,0,.6);
    line-height: 50px;
    text-align: center;
    letter-spacing: 1px;
    color: #fff;
    background: -webkit-linear-gradient(top, #4585db, #396fb7);
}
.loginBtn{
    position: relative;
}
.loginBtn::before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: 4px;
    box-shadow: 0 -3px 0 #75adeb;
}
複製程式碼
巧用偽元素和偽類讓我們的html結構更清晰合理
巧用 ::after/::before 偽元素實現立體按鈕效果

巧用 ::after/::before偽元素製作照片翹邊陰影，使照片更具立體感。

巧用偽元素和偽類讓我們的html結構更清晰合理
巧用 ::after/::before偽元素製作照片翹邊陰影，使照片更具立體感

巧用 ::after/::before偽元素實現標籤頁切換樣式。

巧用偽元素和偽類讓我們的html結構更清晰合理
巧用 ::after/::before偽元素實現標籤頁切換樣式

巧用 ::after/::before偽元素content實現 + - 按鈕。

巧用偽元素和偽類讓我們的html結構更清晰合理
巧用 ::after/::before偽元素content實現 + - 按鈕

偽類： [ 偽類存在的意義是為了通過選擇器找到那些不存在於DOM樹中的資訊以及不能被常規CSS選擇器獲取到的資訊 ]

:hover          //滑鼠懸停時顯示的效果
:link           //連結在正常情況下（即頁面剛載入完成時）顯示的效果
:active         //當元素處於啟用狀態（滑鼠在元素上按下還沒有鬆開）時所顯示的效果
:visited        //連結被點選後顯示的效果
:first-child    //選擇器匹配屬於其父元素的首個子元素的指定選擇器
:last-child     //選擇器匹配屬於其父元素的最後一個子元素的指定選擇器
:nth-child(n)   //選擇器匹配屬於其父元素的第 N 個子元素，不論元素的型別
:not()          //匹配非指定選擇器的每個元素（eg. 匹配所有類名不為active的p元素 p:not(".active")）
:focus          //元素獲得游標焦點時的效果（eg. input 輸入框 input:focus）複製程式碼


相關文章