標(biāo)簽選擇器:
h1{
font-weight:normal;
color:red;
}
類選擇器:
類選擇器在css樣式編碼中是最常用到的桦沉，如右側(cè)代碼編輯器中的代碼:可以實(shí)現(xiàn)為“膽小如鼠”先改、“勇氣”字體設(shè)置為紅色础拨。
語法：
.類選器名稱{css樣式代碼;}
注意：
1知纷、英文圓點(diǎn)開頭
2免猾、其中類選器名稱可以任意起名（但不要起中文噢）
使用方法：
第一步：使用合適的標(biāo)簽把要修飾的內(nèi)容標(biāo)記起來岂嗓，如下：
膽小如鼠
第二步：使用class="類選擇器名稱"為標(biāo)簽設(shè)置一個(gè)類互站，如下：
class="stress">膽小如鼠
第三步：設(shè)置類選器css樣式私蕾，如下：
.stress{color:red;}/*類前面要加入一個(gè)英文圓點(diǎn)*/
id選擇器:
在很多方面，ID選擇器都類似于類選擇符胡桃，但也有一些重要的區(qū)別：
1踩叭、為標(biāo)簽設(shè)置id="ID名稱"，而不是class="類名稱"翠胰。
2容贝、ID選擇符的前面是井號(hào)（#）號(hào)，而不是英文圓點(diǎn)（.）之景。
類和ID選擇器的區(qū)別:
相同點(diǎn)：可以應(yīng)用于任何元素
不同點(diǎn)：
1斤富、ID選擇器只能在文檔中使用一次。與類選擇器不同闺兢，在一個(gè)HTML文檔中茂缚，ID選擇器只能使用一次戏罢，而且僅一次屋谭。而類選擇器可以使用多次。
2龟糕、可以使用類選擇器詞列表方法為一個(gè)元素同時(shí)設(shè)置多個(gè)樣式桐磁。我們可以為一個(gè)元素同時(shí)設(shè)多個(gè)樣式，但只可以用類選擇器的方法實(shí)現(xiàn)讲岁，ID選擇器是不可以的（不能使用 ID 詞列表）我擂。
子選擇器:
還有一個(gè)比較有用的選擇器子選擇器衬以，即大于符號(hào)(>),用于選擇指定標(biāo)簽元素的第一代子元素。
.food>li{border:1px solid red;}
這行代碼會(huì)使class名為food下的子元素li（水果校摩、蔬菜）加入紅色實(shí)線邊框
包含(后代)選擇器
包含選擇器看峻，即加入空格,用于選擇指定標(biāo)簽元素下的后輩元素。如右側(cè)代碼編輯器中的代碼：
.first? span{color:red;}
這行代碼會(huì)使第一段文字內(nèi)容中的“膽小如鼠”字體顏色變?yōu)榧t色衙吩。
請(qǐng)注意這個(gè)選擇器與子選擇器的區(qū)別互妓，子選擇器（child selector）僅是指它的直接后代，或者你可以理解為作用于子元素的第一代后代坤塞。而后代選擇器是作用于所有子后代元素冯勉。后代選擇器通過空格來進(jìn)行選擇，而子選擇器是通過“>”進(jìn)行選擇摹芙。
總結(jié)：>作用于元素的第一代后代灼狰，空格作用于元素的所有后代。
通用選擇器
通用選擇器是功能最強(qiáng)大的選擇器浮禾，它使用一個(gè)（*）號(hào)指定交胚，它的作用是匹配html中所有標(biāo)簽元素，如下使用下面代碼使用html中任意標(biāo)簽元素字體顏色全部設(shè)置為紅色：
* {color:red;}
偽類選擇符
更有趣的是偽類選擇符伐厌，為什么叫做偽類選擇符承绸，它允許給html不存在的標(biāo)簽（標(biāo)簽的某種狀態(tài)）設(shè)置樣式，比如說我們給html中一個(gè)標(biāo)簽元素的鼠標(biāo)滑過的狀態(tài)來設(shè)置字體顏色：
a:hover{color:red;}
上面一行代碼就是為 a 標(biāo)簽鼠標(biāo)滑過的狀態(tài)設(shè)置字體顏色變紅挣轨。這樣就會(huì)使第一段文字內(nèi)容中的“膽小如鼠”文字加入鼠標(biāo)滑過字體顏色變?yōu)榧t色特效军熏。
關(guān)于偽選擇符：
關(guān)于偽類選擇符，到目前為止卷扮，可以兼容所有瀏鑒器的“偽類選擇符”就是 a 標(biāo)簽上使用 :hover 了（其實(shí)偽類選擇符還有很多荡澎，尤其是 css3 中，但是因?yàn)椴荒芗嫒菟袨g覽器晤锹，本教程只是講了這一種最常用的）摩幔。其實(shí) :hover 可以放在任意的標(biāo)簽上，比如說 p:hover鞭铆，但是它們的兼容性也是很不好的或衡，所以現(xiàn)在比較常用的還是 a:hover 的組合。
分組選擇符
當(dāng)你想為html中多個(gè)標(biāo)簽元素設(shè)置同一個(gè)樣式時(shí)车遂，可以使用分組選擇符（封断，），如下代碼為右側(cè)代碼編輯器中的h1舶担、span標(biāo)簽同時(shí)設(shè)置字體顏色為紅色：
h1,span{color:red;}
它相當(dāng)于下面兩行代碼：
h1{color:red;}
span{color:red;}
繼承
CSS的某些樣式是具有繼承性的坡疼，那么什么是繼承呢？繼承是一種規(guī)則衣陶，它允許樣式不僅應(yīng)用于某個(gè)特定html標(biāo)簽元素柄瑰，而且應(yīng)用于其后代闸氮。比如下面代碼：如某種顏色應(yīng)用于p標(biāo)簽，這個(gè)顏色設(shè)置不僅應(yīng)用p標(biāo)簽教沾，還應(yīng)用于p標(biāo)簽中的所有子元素文本蒲跨，這里子元素為span標(biāo)簽。
p{color:red;}
三年級(jí)時(shí)授翻，我還是一個(gè)膽小如鼠的小女孩财骨。
可見右側(cè)結(jié)果窗口中p中的文本與span中的文本都設(shè)置為了紅色。但注意有一些css樣式是不具有繼承性的藏姐。如border:1px solid red;
p{border:1px solid red;}
三年級(jí)時(shí)隆箩，我還是一個(gè)膽小如鼠的小女孩。
在上面例子中它代碼的作用只是給p標(biāo)簽設(shè)置了邊框?yàn)?像素羔杨、紅色捌臊、實(shí)心邊框線，而對(duì)于子元素span是沒用起到作用的兜材。
選擇器的優(yōu)先級(jí):
有的時(shí)候我們?yōu)橥粋€(gè)元素設(shè)置了不同的CSS樣式代碼理澎，那么元素會(huì)啟用哪一個(gè)CSS樣式呢?我們來看一下面的代碼：
p{color:red;}
.first{color:green;}
三年級(jí)時(shí)，我還是一個(gè)膽小如鼠的小女孩曙寡。
p和.first都匹配到了p這個(gè)標(biāo)簽上糠爬，那么會(huì)顯示哪種顏色呢？green是正確的顏色举庶，那么為什么呢执隧？是因?yàn)闉g覽器是根據(jù)權(quán)值來判斷使用哪種css樣式的，權(quán)值高的就使用哪種css樣式户侥。
下面是權(quán)值的規(guī)則：
標(biāo)簽的權(quán)值為1镀琉，類選擇符的權(quán)值為10，ID選擇符的權(quán)值最高為100蕊唐。例如下面的代碼：
p{color:red;}/*權(quán)值為1*/
p span{color:green;}/*權(quán)值為1+1=2*/
.warning{color:white;}/*權(quán)值為10*/
p span.warning{color:purple;}/*權(quán)值為1+1+10=12*/
#footer .note p{color:yellow;}/*權(quán)值為100+10+1=111*/
注意：還有一個(gè)權(quán)值比較特殊--繼承也有權(quán)值但很低屋摔，有的文獻(xiàn)提出它只有0.1，所以可以理解為繼承的權(quán)值最低替梨。
層疊
我們來思考一個(gè)問題：如果在html文件中對(duì)于同一個(gè)元素可以有多個(gè)css樣式存在并且這多個(gè)css樣式具有相同權(quán)重值怎么辦钓试？好，這一小節(jié)中的層疊幫你解決這個(gè)問題副瀑。
層疊就是在html文件中對(duì)于同一個(gè)元素可以有多個(gè)css樣式存在弓熏，當(dāng)有相同權(quán)重的樣式存在時(shí)，會(huì)根據(jù)這些css樣式的前后順序來決定俗扇，處于最后面的css樣式會(huì)被應(yīng)用硝烂。
如下面代碼:
p{color:red;}
p{color:green;}
三年級(jí)時(shí)箕别，我還是一個(gè)膽小如鼠的小女孩铜幽。
最后 p 中的文本會(huì)設(shè)置為green滞谢，這個(gè)層疊很好理解，理解為后面的樣式會(huì)覆蓋前面的樣式除抛。
所以前面的css樣式優(yōu)先級(jí)就不難理解了：
內(nèi)聯(lián)樣式表（標(biāo)簽內(nèi)部）> 嵌入樣式表（當(dāng)前文件中）> 外部樣式表（外部文件中）狮杨。
重要性
我們?cè)谧鼍W(wǎng)頁代碼的時(shí)，有些特殊的情況需要為某些樣式設(shè)置具有最高權(quán)值到忽，怎么辦橄教？這時(shí)候我們可以使用!important來解決。
如下代碼：
p{color:red!important;}p{color:green;}
三年級(jí)時(shí)喘漏，我還是一個(gè)膽小如鼠的小女孩护蝶。
這時(shí) p 段落中的文本會(huì)顯示的red紅色。
注意：!important要寫在分號(hào)的前面
這里注意當(dāng)網(wǎng)頁制作者不設(shè)置css樣式時(shí)翩迈，瀏覽器會(huì)按照自己的一套樣式來顯示網(wǎng)頁持灰。并且用戶也可以在瀏覽器中設(shè)置自己習(xí)慣的樣式，比如有的用戶習(xí)慣把字號(hào)設(shè)置為大一些负饲，使其查看網(wǎng)頁的文本更加清楚堤魁。這時(shí)注意樣式優(yōu)先級(jí)為：瀏覽器默認(rèn)的樣式 < 網(wǎng)頁制作者樣式 < 用戶自己設(shè)置的樣式，但記住!important優(yōu)先級(jí)樣式是個(gè)例外返十，權(quán)值高于用戶自己設(shè)置的樣式妥泉。
一個(gè)android自學(xué)前端之路:如有不正確的地方歡迎指正!!
這里我給大家推薦簡單容易上手理解的學(xué)習(xí)html+css的視頻地址
(免費(fèi))前端初窺
歡迎添加作者微信群 一起學(xué)習(xí)交流!
微信群:
