· CSS選擇符(就是選擇器)
o 基礎(chǔ)選擇器
通配符選擇器 *{}
標(biāo)簽選擇器標(biāo)簽名 p{}
class類選擇器 .class屬性值{}
多類名選擇器 .類名n{} 標(biāo)簽中class屬性為 class="類名1 類名2 ... 類名n"
id選擇器 #id屬性值{}
群組選擇器 選擇器1,選擇器2,...{}
o 結(jié)構(gòu)選擇器
子元素選擇器E>F{} F必須是E的子元素
后代選擇器E F{} F必須是E的后代
相鄰兄弟選擇器E+F{} F是緊挨這E后面的兄弟元素
通用選擇器E~F{} F是E后面所有的兄弟元素
o 屬性選擇器
[Eattr] 元素E中存在attr屬性
[Eattr="value"] 元素E中存在attr屬性,并且attr的屬性值為value
[Eattr~="value"] 元素E中存在attr屬性,并且attr的屬性值為value或者"value value1 ..."的形式
[Eattr^="value"] 元素E中存在attr屬性,并且attr的屬性值以value開始
[Eattr$="value"] 元素E中存在attr屬性,并且attr的屬性值以value結(jié)尾
[Eattr*="value"] 元素E中存在attr屬性,并且attr的屬性值存在value
[Eattr|="value"] 元素E中存在attr屬性,并且attr的屬性值為value或者value-的形式
o 結(jié)構(gòu)偽類選擇器
X:first-child 匹配子集的第一個(gè)元素
X:last-child匹配父元素中最后一個(gè)X元素
X:nth-child(n)用于匹配索引值為n的子元素。索引值從1開始
X:only-child這個(gè)偽類一般用的比較少,比如上述代碼匹配的是div下的有且僅有一個(gè)的p,也就是說,如果div內(nèi)有多個(gè)p,將不匹配。
X:root匹配文檔的根元素。在HTML(標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用)中,根元素永遠(yuǎn)是HTML
X:empty匹配沒有任何子元素(包括包含文本)的元素
o 目標(biāo)偽類
E:target 選擇匹配E的所有元素,且匹配元素被相關(guān)URL指向
o UI狀態(tài)偽類
E:enabled 匹配所有用戶界面(form表單)中處于可用狀態(tài)的E元素
E:disabled 匹配所有用戶界面(form表單)中處于不可用狀態(tài)的E元素
E:checked 匹配所有用戶界面(form表單)中處于選中狀態(tài)的元素E
E:selection 匹配E元素中被用戶選中或處于高亮狀態(tài)的部分
o 否定偽類
E:not(s) (IE6-8瀏覽器不支持:not()選擇器。)匹配所有不匹配簡單選擇符s的元素E
o 動(dòng)態(tài)偽類
E:link 鏈接偽類選擇器 選擇匹配的E元素,而且匹配元素被定義了超鏈接并未被訪問過。常用于鏈接描點(diǎn)上
E:visited 鏈接偽類選擇器 選擇匹配的E元素,而且匹配元素被定義了超鏈接并已被訪問過。常用于鏈接描點(diǎn)上
E:active 用戶行為選擇器 選擇匹配的E元素,且匹配元素被激活。常用于鏈接描點(diǎn)和按鈕上
E:hover 用戶行為選擇器 選擇匹配的E元素,且用戶鼠標(biāo)停留在元素E上。IE6及以下瀏覽器僅支持a:hover
E:focus 用戶行為選擇器 選擇匹配的E元素,而且匹配元素獲取焦點(diǎn)
· 屬性繼承
o 繼承:html元素可以從父元素那里繼承一部分css屬性,即使當(dāng)前元素沒有定義該屬性。
1.字體系列屬性 font,font-family,font-weight,font-size,font-style
2.文本系列屬性 text-indent,text-align,line-height,word-spacing,letter-spacing,text-transform,color
3.元素可見性 visibility
4.表格布局屬性 caption-side,border-collapse,border-spacing,empty-cells,table-layout
5.列表布局屬性 list-style-type,list-style-image,list-style-position,list-style
· 選擇器優(yōu)先級的算法
o 優(yōu)先級就近原則,同權(quán)重情況下樣式定義最近者為準(zhǔn);
o 載入樣式以最后載入的定位為準(zhǔn);
o 優(yōu)先級為:同權(quán)重: 內(nèi)聯(lián)樣式表(標(biāo)簽內(nèi)部)> 嵌入樣式表(當(dāng)前文件中)> 外部樣式表(外部文件中)。
o !important > id > class > tag important 比內(nèi)聯(lián)優(yōu)先級高。
更多關(guān)于“前端培訓(xùn)”的問題,歡迎咨詢千鋒教育在線名師。千鋒教育多年辦學(xué),課程大綱緊跟企業(yè)需求,更科學(xué)更嚴(yán)謹(jǐn),每年培養(yǎng)泛IT人才近2萬人。不論你是零基礎(chǔ)還是想提升,都可以找到適合的班型,千鋒教育隨時(shí)歡迎你來試聽。