巧用偽元素和偽類讓我們的html結(jié)構(gòu)更清晰合理

心系少時言 等一不歸人

css3為了區(qū)分偽類和偽元素,偽元素采用雙冒號寫法蛙紫。

偽類 -- :hover, :link, :active, :visited, :first-child, :last-child, nth-child(n), :not(), :focus
偽元素 -- ::before, ::after, ::first-letter, ::first-line, ::selection
偽元素: [ 偽元素用于向某些選擇器設(shè)置特殊效果途戒,簡單來說喷斋,偽元素創(chuàng)建了一個虛擬容器,這個容器不包含任何DOM元素枉证,但是可以包含內(nèi)容移必,我們可以為偽元素定制樣式 ]

::first-letter -- 用于選取指定選擇器的首字母(eg. 設(shè)置指定選擇器的首字母為大寫紅色)

p:first-letter 
{
    color: #f00;
    font-size: 32px;
    text-transform: capitalize;
}
偽元素 ::first-letter

::first-line -- 用于選取指定選擇器的首行(eg. 設(shè)置指定選擇器的首行背景色為紅色)

p:first-line 
{
   color: #fff;
   background: #f00;
}
偽元素 ::first-line

::selection -- 用于匹配被用戶選取的部分(eg. 設(shè)置被選中的文本為紅色字體)

p::selection
{
    color:#f00;
}
p::-moz-selection
{
    color:#f00;
}
偽元素 ::selection

::before -- 在指定選擇器的內(nèi)容前面插入內(nèi)容(eg. 在被選元素的內(nèi)容之前插入新內(nèi)容)
::after -- 在指定選擇器的內(nèi)容后面插入內(nèi)容(eg. 在被選元素的內(nèi)容之后插入新內(nèi)容)

巧用 ::after/::before 偽元素制作CheckBox開關(guān)按鈕
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);
}
巧用 ::after/::before 偽元素制作CheckBox開關(guān)按鈕
巧用 ::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;
}
巧用 ::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;
}
巧用 ::after/::before 偽元素制作左右按鈕
巧用 ::after/::before 偽元素實現(xiàn)立體按鈕效果
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;
}
巧用 ::after/::before 偽元素實現(xiàn)立體按鈕效果

巧用 ::after/::before偽元素制作照片翹邊陰影,使照片更具立體感潮售。

巧用 ::after/::before偽元素制作照片翹邊陰影酥诽,使照片更具立體感

巧用 ::after/::before偽元素實現(xiàn)標(biāo)簽頁切換樣式皱埠。

巧用 ::after/::before偽元素實現(xiàn)標(biāo)簽頁切換樣式

巧用 ::after/::before偽元素content實現(xiàn) + - 按鈕。

巧用 ::after/::before偽元素content實現(xiàn) + - 按鈕
偽類: [ 偽類存在的意義是為了通過選擇器找到那些不存在于DOM樹中的信息以及不能被常規(guī)CSS選擇器獲取到的信息 ]
:hover          //鼠標(biāo)懸停時顯示的效果
:link           //鏈接在正常情況下(即頁面剛加載完成時)顯示的效果
:active         //當(dāng)元素處于激活狀態(tài)(鼠標(biāo)在元素上按下還沒有松開)時所顯示的效果
:visited        //鏈接被點擊后顯示的效果
:first-child    //選擇器匹配屬于其父元素的首個子元素的指定選擇器
:last-child     //選擇器匹配屬于其父元素的最后一個子元素的指定選擇器
:nth-child(n)   //選擇器匹配屬于其父元素的第 N 個子元素,不論元素的類型
:not()          //匹配非指定選擇器的每個元素(eg. 匹配所有類名不為active的p元素 p:not(".active"))
:focus          //元素獲得光標(biāo)焦點時的效果(eg. input 輸入框 input:focus)
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末恒界,一起剝皮案震驚了整個濱河市砚嘴,隨后出現(xiàn)的幾起案子眯勾,更是在濱河造成了極大的恐慌婆誓,老刑警劉巖洋幻,帶你破解...
    沈念sama閱讀 222,865評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異好唯,居然都是意外死亡燥翅,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,296評論 3 399
  • 文/潘曉璐 我一進店門靶端,熙熙樓的掌柜王于貴愁眉苦臉地迎上來凛膏,“玉大人,你說我怎么就攤上這事台谍∮醵希” “怎么了?”我有些...
    開封第一講書人閱讀 169,631評論 0 364
  • 文/不壞的土叔 我叫張陵掷伙,是天一觀的道長骂因。 經(jīng)常有香客問我赃泡,道長,這世上最難降的妖魔是什么俄烁? 我笑而不...
    開封第一講書人閱讀 60,199評論 1 300
  • 正文 為了忘掉前任页屠,我火速辦了婚禮,結(jié)果婚禮上辰企,老公的妹妹穿的比我還像新娘。我一直安慰自己竹观,他們只是感情好潜索,可當(dāng)我...
    茶點故事閱讀 69,196評論 6 398
  • 文/花漫 我一把揭開白布竹习。 她就那樣靜靜地躺著,像睡著了一般整陌。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上并炮,一...
    開封第一講書人閱讀 52,793評論 1 314
  • 那天逃魄,我揣著相機與錄音澜搅,去河邊找鬼。 笑死勉躺,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的妨退。 我是一名探鬼主播蜕企,決...
    沈念sama閱讀 41,221評論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼轻掩,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了唇牧?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,174評論 0 277
  • 序言:老撾萬榮一對情侶失蹤杆查,失蹤者是張志新(化名)和其女友劉穎宴咧,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體掺栅,經(jīng)...
    沈念sama閱讀 46,699評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡氧卧,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,770評論 3 343
  • 正文 我和宋清朗相戀三年沙绝,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片闪檬。...
    茶點故事閱讀 40,918評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡粗悯,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出横缔,到底是詐尸還是另有隱情衫哥,我是刑警寧澤,帶...
    沈念sama閱讀 36,573評論 5 351
  • 正文 年R本政府宣布膛锭,位于F島的核電站蚊荣,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏妇押。R本人自食惡果不足惜姓迅,卻給世界環(huán)境...
    茶點故事閱讀 42,255評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望柴我。 院中可真熱鬧扩然,春花似錦、人聲如沸夫偶。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,749評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽说铃。三九已至,卻和暖如春债热,著一層夾襖步出監(jiān)牢的瞬間幼苛,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,862評論 1 274
  • 我被黑心中介騙來泰國打工舌剂, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留暑椰,地道東北人。 一個月前我還...
    沈念sama閱讀 49,364評論 3 379
  • 正文 我出身青樓避消,卻偏偏與公主長得像召夹,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子纱意,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,926評論 2 361