標(biāo)簽選擇器

// 標(biāo)簽選擇器是最簡(jiǎn)單的選擇器, 它的命名只要和對(duì)應(yīng)的HTML標(biāo)簽相同即可 h1 {font-size: 30px;color: #333; }

類(lèi)選擇器

// 類(lèi)選擇器也稱(chēng)為class選擇器,它的語(yǔ)法非常簡(jiǎn)單,在class名稱(chēng)前面加上一個(gè)"."符號(hào) <div class="red content"></div> .red {background:red, } .content {height: 100px;width: 100%; }

id選擇器

// id選擇器的語(yǔ)法是一個(gè)"#"號(hào)加上id的名稱(chēng),例如: <div id="user_123"></div>#user_123{width: 120px;line-height: 30px;height: 30px; }

通配符選擇器

// 通配符的意思是用一個(gè)符號(hào)來(lái)代替某些字符,例如在Word中要搜索以com開(kāi)頭的所有單詞,可以用"com*"來(lái)做搜索關(guān)鍵詞 * {color:red;} /* 這個(gè)聲明等價(jià)于列出文檔中所有元素的一個(gè)分組選擇器 */ body {color: red } html {color: red }

子元素選擇器

// 子元素選擇器用于表示某些特定HTML嵌套關(guān)系時(shí)的樣式展現(xiàn),其語(yǔ)法關(guān)鍵詞是一個(gè)">"符號(hào). <li><a href="#">www.baidu.com</a></li> <li><div><a href="#">www.baidu.com</a></div></li>// CSS li > a{color: blue; }

后代元素選擇器

// 后代元素選擇器類(lèi)似于子元素選擇器, 只不過(guò)它的要求不那么嚴(yán)格.它的語(yǔ)法關(guān)鍵詞是一個(gè)空格 // HTML 代碼: <li><a href="#">www.baidu.com</a></li> <li><div><a href="#">www.baidu.com</a></div></li>// CSS 代碼 li a{color: blue; }

相鄰元素選擇器

// 相鄰元素選擇器用于選取和某個(gè)元素相鄰的同級(jí)元素,其語(yǔ)法關(guān)鍵詞是一個(gè)"+"符號(hào), // HTML 代碼 <div class="content"><h1>測(cè)試</h1><p>測(cè)試內(nèi)容</p> </div>// CSS 代碼: h1 + p{font-size: 15px; }

屬性選擇器

[title] {color: red; } /* 所有擁有title屬性的元素的文字顏色設(shè)為紅色 */a[href][title] {color: red; } /* 同時(shí)擁有href 和 title 屬性的a標(biāo)簽的文字顏色設(shè)為紅色 */a[href="http://www.baidu.com"][title="百度"] {color: red; } /* 只有href=://www.baidu.com 且 title="百度"的鏈接(<a>)文字才會(huì)設(shè)置為紅色還可以使用通配符來(lái)進(jìn)行模糊匹配: a[src^="https"] /* 選擇其src 屬性值以"https"開(kāi)頭的每個(gè)<a>元素 */ a[src$=".pdf"] /* 選擇其src 屬性值以".pdf"結(jié)尾的所有<a>元素 */ a[src*="abc"] /* 選擇其src 屬性中包含"abc"字串的每個(gè)<a>元素 */

組選擇器

// 如果要對(duì)多個(gè)元素定義同樣的樣式,則可以用組選擇器來(lái)縮減重復(fù)代碼. 組選擇器的語(yǔ)法關(guān)鍵字是一個(gè)"," h1, h2, h3, h4, h5, h6{font-wight:bold; } 表示從h1~h6 都采用加粗字體

復(fù)合選擇器

// 如果說(shuō)組選擇器相當(dāng)于一種并集, 或者常說(shuō)的"或" (||) 關(guān)系的話,那么復(fù)合選擇器 就表示 "與" (&) 的關(guān)系。 p.test{color: red; }<p class="test">hehe</p> <div>hehe</div> <div class="test">hehe</div> <p>hehe</p>

參考《CSS高效開(kāi)發(fā)實(shí)戰(zhàn)》 P25~P33

總結(jié)

以上是生活随笔為你收集整理的css --- 选择器的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。