/*--------------------
本文為個(gè)人學(xué)習(xí)筆記，
基于書本以及自身掌握，
對相關(guān)內(nèi)容未做深入展開
--------------------*/
偽類&偽元素
- 首字樣式控制 —— 使用偽元素
::first-letter
<p>首字放大的效果</p>
p::first-letter{
font-size: 40px;
}
首字放大
<p>uppercase</p>
p::first-letter{
text-transform:uppercase
}
首字母大寫
- 首行樣式控制 —— 使用偽元素
::first-line
<p>我想第一行文字有加粗效果，不管屏幕寬度多少，始終能做到這個(gè)效果。</p>
p{
width:200px;
}
p::first-line{
font-weight: bold;
}
首行控制
- 偽元素
::before與::after用于為DOM中的元素添加內(nèi)容；需要配合特有的content屬性；注意，添加的內(nèi)容并不真正存在于DOM中；另外，基于表現(xiàn)與內(nèi)容分離的原則，我們使用這兩個(gè)偽元素的目的是進(jìn)行樣式控制，而不是真正的內(nèi)容輸出，后者是HTML的事。 - 偽類是對CSS選擇器的補(bǔ)充、擴(kuò)展以及篩選；錨偽類即超鏈接偽類是最常見的，比如
:hover、:link、:active、:visited等，此時(shí)的偽類用于對同一元素的不同狀態(tài)進(jìn)行控制，表單元素獲得焦點(diǎn)時(shí)通過:focus偽類進(jìn)行控制也相似；CSS3的:nth-child()等偽類則更多擴(kuò)展了CSS選擇器的“選擇”功能。
樣式優(yōu)先權(quán)
- 行內(nèi)（
style="..."） > 內(nèi)部（<style>...</style>） > 外部（<link href="..."/>） - id選擇器（
#idName{}） > 類選擇器（.className{}） > 元素標(biāo)簽選擇器（p{}） - 兩行相同屬性的定義，后者會覆蓋前者
-
!important優(yōu)先于以上所有
