及代碼-5css的選擇器下

CSS的樣式選擇器主講人：高洛峰&妹子

CSS選擇器（選擇符）HTML選擇符類選擇符ID選擇符關(guān)聯(lián)選擇符組合選擇符偽元素選擇符 HTML選擇符HTML選擇符即是HTML標(biāo)簽，用來改變一個指定標(biāo)簽的樣式，任何HTML元素都可以是一個CSS的選擇符。語法：HTML標(biāo)簽名{屬性：值}p{text-indent:3em;} /*當(dāng)中的選擇符是p*/h1{color:red;} /*當(dāng)中的選擇符是h1*/

ID選擇符CSSID選擇符--匹配文檔中元素E的id屬性的屬性值為idname的元素語法：ID名稱{屬性：值}ID選擇符名稱的定義方式是，#符號，英文"pound"，后加ID名稱idnameID選擇符的定義需要有#符號（#符號標(biāo)明是ID選擇符），但是HTML文檔中的標(biāo)簽的id屬性名不能出現(xiàn)#符號，見下面示例id屬性的特殊之處在于，一個文檔中只能有一個元素使用一個ID選擇符（與class屬性正好相反），id屬性可以用來單一地標(biāo)識一個元素。#main{text-indent:3em;} /*ID名稱main前加上一個#號*/……<pid=“main”>文本縮進(jìn)3em</p> <!–在html的p標(biāo)簽中指定id屬性main-->

ID選擇符定義ID選擇符在HTML中的應(yīng)用

類選擇符CSS類選擇符--匹配文檔中元素E的class屬性的屬性值為classname的元素

語法：標(biāo)記名.類名{屬性：值}或

.類名{屬性：值}類選擇符名稱的定義方式是,"."符號，英文"dot"，后加類名稱classname類選擇符的定義需要有.符號（.符號標(biāo)明是類選擇符），但是HTML文檔中的標(biāo)簽的class屬性名不能出現(xiàn).符號，見下面示例：

p.dark-row{background:#EAEAEA;}/*設(shè)置p標(biāo)簽中class屬性為dark-row的*/.note{font-size:small} /*為note的類可以被用于任何元素*/

<pclass="dark-row">第一段</p> <!–具有類dark-row樣式--><spanclass="dark-row">第二段</span> <!–沒有類dark-row樣式--><spanclass="note">第三段</span> <!–具有類note樣式--><divclass="note">第四段</div> <!–具有類note樣式-->類選擇符定義類選擇符應(yīng)用

關(guān)聯(lián)選擇符關(guān)聯(lián)選擇符也稱包含選擇符,可以單獨對某種元素包含關(guān)系定義的樣式表，元素1里包含元素2，這種方式只對在元素1里的元素2定義，對單獨的元素1或元素2無定義語法：選擇符1選擇符2...{屬性：值}例如：

在表格內(nèi)的鏈接改變了樣式，文字大小為12象素，而表格外的鏈接的文字仍為默認(rèn)大小。tablea{font-size:12px}

組合選擇符組合選擇符也叫選擇符組，可以把相同屬性和值的選擇符組合起來書寫，用逗號將選擇符分開，這樣可以減少樣式重復(fù)定義。語法：選擇符1,選擇符2,.,..{屬性：值}例如：h1,h2,h3,h4,h5,h6{color:green}

p,table{font-size:9pt}

效果完全等效于：

p{font-size:9pt}

table{font-size:9pt}

偽元素選擇符偽元素選擇符是指對同一個HTML元素不同狀態(tài)的一種定義方式。例如對于<a>標(biāo)簽的正常狀態(tài)、訪問狀態(tài)、選中狀態(tài)、光標(biāo)移到超鏈接文本上的狀態(tài)，就可以使用偽元素選擇器來定義。語法：標(biāo)簽:偽元素{屬性:值;}a:link{color:#FF0000;text-decoration:none} /*未訪問的鏈接*/a:visited{color:#00FF00;text-decoration:none} /*已訪問的鏈接*/a:hover{color:#FF00FF;text-decoration:underline}/*鼠標(biāo)在鏈接上*/a:active{color:#0000FF;text-decoration:underline}/*激活鏈接*/提示：a:hover必須被置于