class選擇器
HTML標籤上具有class屬性，class屬性表示類名的意思。
比如下面的代碼：
類名的命名規範和id的命名規範相同。也是只能由字母、數字、下劃線、短橫構成，且不能以數字開頭，區分大小寫。
class選擇器使用.前綴+類名來選擇指定class的標籤。
比如.warning就是class選擇器，它表示選擇class屬性值為"warning"的標籤。
class類名有以下特點：
1.多個標籤可以使用相同的類名
我們知道一個頁面上，id名是唯一的，一個id名只能被一個標籤所使用，但是class名就靈活多了，一個class名可以被多個標籤所使用。
比如下面的代碼：
上面代碼中有兩個p標籤和兩個li標籤都使用了"warning"這個類名。
那麼.warning這個選擇器就會把這四個標籤全部選擇上。
2.一個標籤可以同時屬於多個類，類名用空格隔開。
比如下面的代碼：
上面代碼中，p標籤有兩個類名，一個是"warning"，另一個是"spec"，它們之間用一個空格隔開。
那麼這個p標籤就同時具有了.warning和.spec這兩個選擇器的屬性，也就是說，這個p標籤同時擁有了CSS中.warning和.spec這兩個選擇器的樣式。即字體為紅色，並且文字傾斜。
這裡又有一個新的CSS屬性----font-style:italic
把它記下來：font是字體的意思，style是樣式的意思，italic是斜體的意思。
接下來在編輯器中演示一下，我創建了一個"class選擇器.html"的文件，代碼如下：
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>class選擇器</title><style>.warning {color: red; }.spec {/* 文字傾斜 */font-style: italic; }</style></head><body><p>低級的欲望靠放縱就可以滿足</p><pclass="warning">高級的欲望靠克制才能夠實現</p><pclass="spec">絕對的權利導致絕對的腐敗</p><pclass="warning spec">絕對的自由導致絕對的扯淡</p><ul><li>要改變生活的負循環狀態</li><liclass="warning">要想不搞砸自己的人生</li><liclass="spec">最好的辦法就是改變現在的壞習慣</li><liclass="warning spec">去養成另外一種好習慣</li></ul></body></html>
上面代碼中，我給p標籤和li標籤都添加了"warning"和"spec"類名，也就是說，同一個class類名，可以給任何標籤添加。
同時任何一個標籤，也可以攜帶多種類名。比如上面代碼中，我給第4個p標籤和第4個li標籤都同時添加了"warning"和"spec"兩個類名。
所以，瀏覽器中效果如下：
我們看到，
添加"warning"類名的標籤文字都是紅色，添加了"spec"類名的標籤文字都是傾斜的。
第一個p標籤和第一個li標籤哪個類名都沒有添加，所以既不是紅色，也沒有傾斜。
第四個p標籤和第四個li標籤，同時添加了"warning"和"spec"類名，所以既是紅色，又是傾斜的。
注意，假如說，我的CSS這樣寫：
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>class選擇器</title><style>.warning {color: red; }.spec {/* 文字傾斜 */font-style: italic;color: green; }</style></head><body><p>低級的欲望靠放縱就可以滿足</p><pclass="warning">高級的欲望靠克制才能夠實現</p><pclass="spec">絕對的權利導致絕對的腐敗</p><pclass="warning spec">絕對的自由導致絕對的扯淡</p><ul><li>要改變生活的負循環狀態</li><liclass="warning">要想不搞砸自己的人生</li><liclass="spec">最好的辦法就是改變現在的壞習慣</li><liclass="warning spec">去養成另外一種好習慣</li></ul></body></html>
即在.spec中，添加了color:green這個樣式。現在添加了warning類名的標籤就是紅色，添加了spec類名的標籤就是綠色，那麼同時添加了warning和spec的標籤，到底是紅色還是綠色呢？
答案是，根據CSS代碼從上往下的順序，哪個屬性寫在後面，就採用哪個屬性的樣式。
什麼意思呢？因為spec這個選擇器及其樣式代碼寫在warning這個選擇器的後面，所以，同時添加了warning類名和spec類名的標籤，就採用綠色。
同樣的道理，如果你把warning選擇器及其樣式代碼寫在spec這個選擇器的後面，那麼同時添加了warning類名和spec類名的標籤，就採用紅色。
原子類
在做項目前，把頁面上所有的常用字號、字體顏色、行高、外邊距、內邊距等屬性都設置成單獨的類，這個類就叫原子類。
比如下面的代碼：
這裡又有一個新的樣式屬性--font-size
font是字體，size是尺寸，12px是12像素。
所以font-size:12px就表示字體的大小為12像素。
上面代碼中，fs12這個類，設置的字體大小是12像素，fs14這個類，設置的字體大小是14像素，fs16這個類，設置的字體大小是16像素，......
字體大小有很多種，這裡由於篇幅所限，只列舉了這幾種大小，其他的就不列出來了。
同樣的，這裡也只列出了color-red、color-blue、color-green這三個字體顏色的類，color-red這個類，設置字體顏色為紅色，color-blue這個類，設置字體顏色為藍色，color-green這個類，設置字體顏色為綠色，還有其他顏色的類，就不列出來了。
那麼像這些fs12、fs14、fs16、color-red、color-blue、color-green，都是只設置一個單獨的樣式屬性，這就叫原子類。
原子類有什麼作用呢？
設置了原子類之後，我們就可以給HTML標籤"按需添加"需要的類名了，這樣可以非常快速的添加一些常見樣式，提高效率。
比如下面的代碼：
這個代碼中的p標籤，當我們設置了原子類，給這個p標籤添加了fs18和color-green這兩個類名，這就表示這個p標籤的文字大小是18像素，文字顏色是綠色的 。
這樣做，網頁添加一些常見的樣式就非常快捷迅速了。
接下來我在編輯器中演示一下原子類的用法。
還是回到"class選擇器.html"這個文件中，我在CSS代碼中，定義一些原子類，然後新寫兩個p標籤，用原子類來設置這兩個p標籤的樣式，代碼如下：
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>class選擇器</title><style>.warning {color: red; }.spec {/* 文字傾斜 */font-style: italic;color: green; }/* 原子類 */.fs16 {font-size: 16px; }.fs18 {font-size: 18px; }.fs20 {font-size: 20px; }.fs22 {font-size: 22px; }.color-red {color: red; }.color-blue {color: blue; }.color-green {color: green; }.color-orange {color: orange; }</style></head><body><p>低級的欲望靠放縱就可以滿足</p><pclass="warning">高級的欲望靠克制才能夠實現</p><pclass="spec">絕對的權利導致絕對的腐敗</p><pclass="warning spec">絕對的自由導致絕對的扯淡</p><ul><li>要改變生活的負循環狀態</li><liclass="warning">要想不搞砸自己的人生</li><liclass="spec">最好的辦法就是改變現在的壞習慣</li><liclass="warning spec">去養成另外一種好習慣</li></ul><!-- 下面的標籤使用原子類添加樣式 --><pclass="fs20 color-green">利益是超越意識形態的。</p><pclass="fs18 color-orange">任何人做任何事都是有動機的，拋開動機談言論自由，從根本上講，就是耍流氓。</p></body></html>
在上面的代碼中，我想給新寫的兩個p標籤，其中一個設置字體大小為20像素，字體顏色為綠色，就直接在標籤上添加原子類"fs20"和"color-green"，給另一個設置字體大小為18像素，字體顏色為橙色，就直接在標籤上添加原子類"fs18"和"color-orange"。
是不是很快捷？
通過上面的代碼，你就能理解什麼是原子類，以及原子類的用法。
當然，你可以根據自己的需要設置原子類，在實際開發中，會大大提高開發效率。