· CSS選擇符(就是選擇器)
o 基礎選擇器
通配符選擇器 *{}
標簽選擇器標簽名 p{}
class類選擇器 .class屬性值{}
多類名選擇器 .類名n{} 標簽中class屬性為 class="類名1 類名2 ... 類名n"
id選擇器 #id屬性值{}
群組選擇器 選擇器1,選擇器2,...{}
o 結構選擇器
子元素選擇器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結尾
[Eattr*="value"] 元素E中存在attr屬性,并且attr的屬性值存在value
[Eattr|="value"] 元素E中存在attr屬性,并且attr的屬性值為value或者value-的形式
o 結構偽類選擇器
X:first-child 匹配子集的第一個元素
X:last-child匹配父元素中最后一個X元素
X:nth-child(n)用于匹配索引值為n的子元素。索引值從1開始
X:only-child這個偽類一般用的比較少,比如上述代碼匹配的是div下的有且僅有一個的p,也就是說,如果div內有多個p,將不匹配。
X:root匹配文檔的根元素。在HTML(標準通用標記語言下的一個應用)中,根元素永遠是HTML
X:empty匹配沒有任何子元素(包括包含文本)的元素
o 目標偽類
E:target 選擇匹配E的所有元素,且匹配元素被相關URL指向
o UI狀態偽類
E:enabled 匹配所有用戶界面(form表單)中處于可用狀態的E元素
E:disabled 匹配所有用戶界面(form表單)中處于不可用狀態的E元素
E:checked 匹配所有用戶界面(form表單)中處于選中狀態的元素E
E:selection 匹配E元素中被用戶選中或處于高亮狀態的部分
o 否定偽類
E:not(s) (IE6-8瀏覽器不支持:not()選擇器。)匹配所有不匹配簡單選擇符s的元素E
o 動態偽類
E:link 鏈接偽類選擇器 選擇匹配的E元素,而且匹配元素被定義了超鏈接并未被訪問過。常用于鏈接描點上
E:visited 鏈接偽類選擇器 選擇匹配的E元素,而且匹配元素被定義了超鏈接并已被訪問過。常用于鏈接描點上
E:active 用戶行為選擇器 選擇匹配的E元素,且匹配元素被激活。常用于鏈接描點和按鈕上
E:hover 用戶行為選擇器 選擇匹配的E元素,且用戶鼠標停留在元素E上。IE6及以下瀏覽器僅支持a:hover
E:focus 用戶行為選擇器 選擇匹配的E元素,而且匹配元素獲取焦點
· 屬性繼承
o 繼承:html元素可以從父元素那里繼承一部分css屬性,即使當前元素沒有定義該屬性。
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
· 選擇器優先級的算法
o 優先級就近原則,同權重情況下樣式定義最近者為準;
o 載入樣式以最后載入的定位為準;
o 優先級為:同權重: 內聯樣式表(標簽內部)> 嵌入樣式表(當前文件中)> 外部樣式表(外部文件中)。
o !important > id > class > tag important 比內聯優先級高。
更多關于“前端培訓”的問題,歡迎咨詢千鋒教育在線名師。千鋒教育多年辦學,課程大綱緊跟企業需求,更科學更嚴謹,每年培養泛IT人才近2萬人。不論你是零基礎還是想提升,都可以找到適合的班型,千鋒教育隨時歡迎你來試聽。