資訊專欄INFORMATION COLUMN
摘要：本文章專門學(xué)習(xí)先上總結(jié)偽元素可以隨便用，因?yàn)樗桓蓴_正常的頁面元素。之前一直傻傻分不清什么是偽元素，什么是偽類。偽元素也有樣式很搞笑的是，偽元素雖然很偽，但是卻可以正常的設(shè)置樣式背景文本大小，丫的頁面上卻什么都看不出。
本文章專門學(xué)習(xí)：after before
先上總結(jié)：
偽元素可以隨便用，因?yàn)樗桓蓴_正常的頁面元素。
偽元素主要是用來實(shí)現(xiàn)一些華麗叼炸天的顯示效果，而不是頁面布局，當(dāng)然 after+content 可以清除頁面浮動(dòng).
感覺偽元素的用途其實(shí)比較的成熟或者固定，創(chuàng)新的用法通常正常人很難想出來，個(gè)人覺得只需要熟悉那些情景可以用，怎么用就可以。
之前一直傻傻分不清什么是偽元素，什么是偽類。
偽元素 :after,:before
偽類 :hover :active
參考資料
到底什么是偽元素1.他們是假的元素，不存在的元素，更不是隱藏的元素
2.偽元素將會(huì)在內(nèi)容元素的前后插入額外的元素，因此當(dāng)我們添加它們時(shí)，使用以下的標(biāo)記方式，他們?cè)诩夹g(shù)上是平等的。
簡單用法
:before This the main content. :after
在引用的之前和之后分別添加添加一個(gè)引號(hào)。
blockquote:before {
content: open-quote;
}
blockquote:after {
content: close-quote;
}
偽元素也有樣式
很搞笑的是，偽元素雖然很偽，但是卻可以正常的設(shè)置樣式（背景、文本大?。镜捻撁嫔蠀s什么都看不出。
blockquote:before {
content: open-quote;
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
background: #ffffd;
float: left;
position: relative;
top: 30px;
}
blockquote:after {
content: close-quote;
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
background: #ffffd;
float: right;
position: relative;
bottom: 40px;
}
問題是：它能干嘛？
關(guān)聯(lián)背景圖片
blockquote:before {
content: " ";
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
float: left;
position: relative;
top: 30px;
border-radius: 25px;
background: url(images/quotationmark.png) -3px -3px #ffffd;
display: block;
height: 25px;
width: 25px;
}
blockquote:after {
content: " ";
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
float: right;
position: relative;
bottom: 40px;
border-radius: 25px;
background: url(images/quotationmark.png) -1px -32px #ffffd;
display: block;
height: 25px;
width: 25px;
}
結(jié)合偽類
blockquote:hover:after, blockquote:hover:before {
background-color: #555;
}
添加過渡效果
transition: all 350ms; -o-transition: all 350ms; -moz-transition: all 350ms; -webkit-transition: all 350ms;三個(gè)酷到爆炸的DEMO
當(dāng)然這里面需要一個(gè)重要的CSS3屬性：box-shadow
CSS Box Shadow Effects - Demo
Image Stack Illusion
3D button
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/78589.html
摘要：并且，一些偽元素可以使開發(fā)者獲取到不存在于源文檔中的內(nèi)容比如常見的還可以為偽元素定制樣式。。中新增加的偽元素必須用偽類使用一個(gè)冒號(hào)例如。就本文而言，我們將把我們探討的范圍限制在和這兩個(gè)偽元素的巧用上。 作為一門前端er,你肯定熟知 a:hover ? ??a:visited.....我還記得在小本本上記著訣竅：love 與 hate 糾纏不休,大家都懂的吧。。。。 ? ?????偽類和...
摘要：狀態(tài)偽類是基于元素當(dāng)前狀態(tài)進(jìn)行選擇的。在與用戶的交互過程中元素的狀態(tài)是動(dòng)態(tài)變化的，因此該元素會(huì)根據(jù)其狀態(tài)呈現(xiàn)不同的樣式。單冒號(hào)用于偽類，雙冒號(hào)用于偽元素。可以通過對(duì)父元素添加偽類撐開父元素高度，因?yàn)榫褪瞧渥詈笠粋€(gè)子元素。 css選擇器常見包括id（#id）、標(biāo)簽（tag）、class（.class）、屬性[attr=attrval]等，還包括偽元素和偽類選擇器。正確的利用偽元素和偽類能...
摘要：狀態(tài)偽類是基于元素當(dāng)前狀態(tài)進(jìn)行選擇的。在與用戶的交互過程中元素的狀態(tài)是動(dòng)態(tài)變化的，因此該元素會(huì)根據(jù)其狀態(tài)呈現(xiàn)不同的樣式。單冒號(hào)用于偽類，雙冒號(hào)用于偽元素。可以通過對(duì)父元素添加偽類撐開父元素高度，因?yàn)榫褪瞧渥詈笠粋€(gè)子元素。 css選擇器常見包括id（#id）、標(biāo)簽（tag）、class（.class）、屬性[attr=attrval]等，還包括偽元素和偽類選擇器。正確的利用偽元素和偽類能...
閱讀 867·2021-11-25 09:44
閱讀 1086·2021-11-19 09:40
閱讀 7112·2021-09-07 10:23
閱讀 1987·2019-08-28 17:51
閱讀 1117·2019-08-26 10:59
閱讀 1939·2019-08-26 10:25
閱讀 3149·2019-08-23 18:22
閱讀 872·2019-08-23 16:58
