標簽選擇器

// 標簽選擇器是最簡單的選擇器, 它的命名只要和對應的HTML標簽相同即可 h1 {font-size: 30px;color: #333; }

類選擇器

// 類選擇器也稱為class選擇器,它的語法非常簡單,在class名稱前面加上一個"."符號 <div class="red content"></div> .red {background:red, } .content {height: 100px;width: 100%; }

id選擇器

// id選擇器的語法是一個"#"號加上id的名稱,例如: <div id="user_123"></div>#user_123{width: 120px;line-height: 30px;height: 30px; }

通配符選擇器

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

子元素選擇器

// 子元素選擇器用于表示某些特定HTML嵌套關系時的樣式展現,其語法關鍵詞是一個">"符號. <li><a href="#">www.baidu.com</a></li> <li><div><a href="#">www.baidu.com</a></div></li>// CSS li > a{color: blue; }

后代元素選擇器

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

相鄰元素選擇器

// 相鄰元素選擇器用于選取和某個元素相鄰的同級元素,其語法關鍵詞是一個"+"符號, // HTML 代碼 <div class="content"><h1>測試</h1><p>測試內容</p> </div>// CSS 代碼: h1 + p{font-size: 15px; }

屬性選擇器

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

組選擇器

// 如果要對多個元素定義同樣的樣式,則可以用組選擇器來縮減重復代碼. 組選擇器的語法關鍵字是一個"," h1, h2, h3, h4, h5, h6{font-wight:bold; } 表示從h1~h6 都采用加粗字體

復合選擇器

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

參考《CSS高效開發實戰》 P25~P33

總結

以上是生活随笔為你收集整理的css --- 选择器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。