標簽選擇器

// 標簽選擇器是最簡單的選擇器, 它的命名只要和對應的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