css樣式表乍一看挺簡單的，但是你隨便下載一個實例，哇，這都啥啊，點點劃劃的看不懂……還是繼續學習吧！前面說過了，CSS 語法規則就是：選擇器+聲明。那我們就首先看看有哪些選擇器吧。
目錄
1 標籤選擇器
標籤選擇器也稱爲元素選擇器，是指直接使用HTML標籤作爲選擇器名稱。
html {background-color: black;} /*整個文檔添加黑色背景*/
p {font-size: 30px; backgroud-color: gray;} /*所有段落文檔字體大小設爲30px並添加灰色背景*/
h2 {background-color: red;} /*對文檔所有h2標題添加紅色背景*/
也可以同時對多個HTML元素進行聲明，這種選擇器也叫做”分組選擇器“：
h1, h2, h3, h4, h5, h6, p {font-family: 黑體;}
如果想選取所有的元素，可以使用通配符 * ，表示該選擇器可以與任何元素匹配：
* { font-size: 20px;} /*所有元素的字號都爲20px,對於不含該屬性的元素則無效*/
2 類選擇器
我們現在每天看到各種各樣的網頁，不難發現，通過標籤定義樣式實在是太粗糙了。對於同一種HTML元素，我們也有不同的要求，比如爲了突出或者爲了美觀。這個時候，我們可以考慮使用類選擇器(class selector)。
要使用類選擇器我們需要首先對HTML文件中的元素添加class屬性，比如我們想強調和截止日期有關的內容，就可以對相關的內容設置類：
<p class="deadline">...</p>
<h2 class="deadline">...</h2>
之後，在對應的樣式表中設定樣式：
p.deadline { color: red;}
h2.deadline { color: red;}
點號”.”加上類名就組成了一個類選擇器。注意：類選擇器定義時，名稱不能以數字開頭。
如果我們省略.deadline前面的元素名，就相當於統一選中了所有包含該類的元素：
.deadline { color: red;}
通常情況下，我們會組合使用以上2者得到更加有趣的樣式，這也就是”嵌套選擇器“：
p
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}
p.marked{
text-decoration:underline;
}
上面的例子效果如下，剛開始看有些繞，多試試吧：
- p{ }: 爲所有 p 元素指定一個樣式。
- .marked{ }: 爲所有 class="marked" 的元素指定一個樣式。
- .marked p{ }: 爲所有 class="marked" 元素內的 p 元素指定一個樣式。
- p.marked{ }: 爲所有 class="marked" 的 p 元素指定一個樣式。
需要注意的是，一個元素可以同時包含多個class。比如我們在css文件中定義兩個類：
.warning { color: red;}
.important { font-weight: bold;}
對於HTML中的元素，可以同時包含這兩個類的性質，各個類名之間用空格隔開，且與順序無關：
<p class="warning important">...</p>
<p class="important warning">...</p>
有時候，兩種類的疊加效果可能不大好，比如字的顏色和背景顏色不匹配啊之類的，那麼我們還可以重新寫這樣的”複合屬性“：
.warning { color: red;}
.important { font-weight: bold;}
.warning.important { font-style: italic;}
.important.warning { font-style: italic;}
對於上面這樣的代碼，可以這樣解釋：帶有warning屬性的元素字體爲紅色，帶有important屬性的元素字體會加粗，而同時具有warning和important的文字，會加粗（important屬性）、字體爲紅色（warning屬性）並添加變成斜體（important和warning屬性同時存在）。後兩行代碼是等效的，也就是說設置多個屬性的類也和詞序沒有關係。
同樣的，也可以在前面加上元素名，匹配包含指定類名的指定元素，譬如 p.warning.important {}。
另外，如果我們再做如下的定義：
.important.urgent {background:silver;}
這個選擇器將只匹配 class 屬性中包含詞 important 和 urgent 的元素。所以之前提到的只有important、warning屬性的元素，使不能匹配的，但是它可以匹配以下元素：
<p class="important urgent warning">...</p>
3 id選擇器
ID選擇器和類選擇器有些類似，id選擇器使用自定義名稱，以 # 號作爲前綴，在HTML中通過標籤的id屬性進行名稱匹配。
比如，在HTML中，我們可以給某個元素指定一個id：
<div id="page">...</div>
在CSS定義樣式：
#page {
position: relative;
overflow-x: hidden;
width: 100%;
height: 100%;
}
id屬性和class屬性的差別十分顯著：
- 一個元素只能擁有一個唯一的ID屬性，但是可以擁有多個class屬性（再強調一下：空格分割，順序無關）。
- 一個ID值在一個HTML文檔中只能出現一次，也就是一個ID只能唯一標識一個元素(不是一類元素，而是一個元素)。
我感覺，id屬性比較適合特殊的元素，沒有特殊需求的時候，爲了重用和命名方便，使用class屬性是比較好的。
還有一個值得注意的地方：
類選擇器和 ID 選擇器可能是區分大小寫的。這取決於文檔的語言。
4 屬性選擇器
屬性選擇器，是指爲擁有指定屬性的HTML元素設置樣式。
看教程的時候有一個說明，帖上來：
只有在規定了 !DOCTYPE 時，IE7 和 IE8 才支持屬性選擇器。在 IE6 及更低的版本中，不支持屬性選擇。
4.1 [attribute]
屬性選擇器，如下所示，表示選擇所有帶有title屬性的元素：
[title]{color:red;}
可以指定具有屬性的元素種類，下面的例子表示將選擇帶有href屬性的HTML 超鏈接的文本設置爲紅色：
a[href] {color:red;}
這個例子表示修改所有帶有 alt 屬性的圖像的border樣式，常用來突出顯示圖像：
img[alt] {border: 5px solid red;}
也可以同時指定多個屬性，下面的例子表示將選擇同時帶有href屬性和title屬性的HTML 超鏈接的文本設置爲紅色：：
a[href][title] {color:red;}
4.2 [attribute=value]
屬性和值選擇器，當屬性與屬性值必須完全匹配時應用樣式。如下所示，表示選擇所有 title 屬性爲 flower 的元素：
[title=flower]{border:5px solid blue;}
下面這個例子表示將指向某個指定文檔的超鏈接變成紅色：
a[href="https://blog.csdn.net/qq_45427038"] {color: red;}
也可以同時使用多個屬性-值選擇器：
<a href="https://blog.csdn.net/qq_45427038" title="M&Q">小仙女的博客</a>
4.3 [attribute~=value]
下面的例子爲包含指定值的 title 屬性的所有元素設置樣式，適用於由空格分隔的屬性值：
[title~=flower]{border:5px solid blue;}
這裏有一個比較好的例子，可以直觀的看一下：
4.4 [attribute |= language]
這是一種適用於由連字符分割的屬性值的選擇器，下面的例子表示lang屬性以 en 爲開頭的所有元素：
[lang|=en] { color:red; }
4.5 其他
屬性選擇器還有一些用法，就隨便列一下，不展開說了：
再提一下，屬性選擇器在爲不帶有 class 或 id 的表單設置樣式時特別有用：
5 後代選擇器
後代選擇器（descendant selector）又稱爲包含選擇器，可以選擇作爲某元素後代的元素。我們可以定義後代選擇器來創建一些規則，使這些規則在某些文檔結構中起作用，而在另外一些結構中不起作用。
比如，下面這個例子，就是隻對 h1 元素中的 em 元素應用樣式，而不會影響其他地方的 em 元素：
h1 em {color:red;}
tips:
- 需要注意選擇器的解讀順序！！
- 後代選擇器中，兩個元素之間的層次間隔可以是無限的！！！
6 子元素選擇器
和後代選擇器相反，子元素選擇器（Child selectors）只能選擇作爲某元素子元素的元素。
例如，如果您希望選擇只作爲 h1 元素子元素的 strong 元素，可以這樣寫：
h1 > strong {color:red;}
子選擇器使用了大於號 >（子結合符），選擇器 h1 > strong 可以解釋爲“選擇作爲 h1 元素子元素的所有 strong 元素”。
子選擇器也可以和後代選擇器結合起來，但是我覺得這樣太複雜了，就不多說了，有興趣的自己看吧。
7 相鄰兄弟選擇器
相鄰兄弟選擇器（Adjacent sibling selector）可選擇緊接在另一元素後的元素，且二者有相同父元素。相鄰兄弟選擇器使用加號（+）表示，即相鄰兄弟結合符（Adjacent sibling combinator）。
例如，如果要增加緊接在 h1 元素後出現的段落的上邊距，可以這樣寫：
h1 + p {margin-top:50px;}
這種表示方法只對h1後的段落有效，而不影響其他地方的段落。
8 僞類 (Pseudo-classes)
CSS 僞類用於向某些選擇器添加特殊的效果，也就是根據不同的狀態來顯示不同的樣式。僞類的語法如下：
selector : pseudo-class {property: value}
舉個例子，默認的超鏈接爲藍色，帶下劃線，可以設置僞類更改其不同狀態下的樣式：
a:link {color: #FF0000} /* 未訪問的鏈接 */
a:visited {color: #00FF00} /* 已訪問的鏈接 */
a:hover {color: #FF00FF} /* 鼠標移動到鏈接上 */
a:active {color: #0000FF} /* 選定的鏈接 */
還有其他內容，在這裏就不展開了，用到的時候再補充吧：
9 僞元素 (Pseudo-elements)
僞元素用於向某些選擇器設置特殊效果，它的語法爲：
selector:pseudo-element {property:value;}
