HTML5入門教程 CSS3 新增選擇器

1、html5入門教程 css3 新增選擇器css3挑選器是在css2.0的基礎(chǔ)上的修改創(chuàng)新。它增強(qiáng)了一些ui元素狀態(tài)偽類挑選器、結(jié)構(gòu)偽類挑選器、屬性挑選器等。css3新增的這些挑選器很強(qiáng)大，它的浮現(xiàn)給我們前端帶來了好多方便。一、使我們的網(wǎng)頁代碼更簡潔、結(jié)構(gòu)越發(fā)清楚，結(jié)構(gòu)清楚就會(huì)有利于seo（搜尋引擎）的優(yōu)化，代碼簡潔解釋代碼會(huì)少，代碼少文件就會(huì)小，占用的網(wǎng)絡(luò)帶寬就會(huì)少，那么網(wǎng)頁的加載速度就會(huì)快，用戶體驗(yàn)度就會(huì)更好。例如：:first-child是用來挑選某個(gè)元素的第一個(gè)子元素，比如你想讓列表中的"1"具有別出心裁的樣式，我們就可以用法:first-child來實(shí)現(xiàn)：li:fi

2、rst-child background: ff0;在沒有這個(gè)挑選器浮現(xiàn)之前，我們都需在要第一個(gè)li上加上一個(gè)不同的class名，比如說first，然后在給他應(yīng)用不同的樣式li.first background: ff0;其實(shí)這兩種終于效果是一樣的，只是后面這種，我們需要在html增強(qiáng)一個(gè)額外的class名，前一種就不需要二、免除起名的苦惱，之前我們用css2.0寫一個(gè)網(wǎng)站需要給標(biāo)簽添加id或class名稱去區(qū)別不同的標(biāo)簽，id或class名稱的起名要求是：以英文字母開始，后面可以銜接數(shù)字、字母、下劃線、連字符和特別字符，建議盡量用法英文字母，適當(dāng)用法下劃線和銜接線；詞必達(dá)意，名稱要反映用途和

3、相關(guān)信息，同時(shí)也要簡短。這一要求對(duì)于我們大多數(shù)不是英語專業(yè)、英語又不好的來說就比較困難。假如起的名字不是很規(guī)范那么就簡單叫人覺得你不夠?qū)I(yè)。而不專業(yè)的起名也會(huì)給后期的開發(fā)維護(hù)帶來一些不須要的棘手，css3新增的結(jié)構(gòu)偽類挑選器的浮現(xiàn)給我們帶來了福利，我們不需要添加class或id名稱，也能輕松控制某一個(gè)標(biāo)簽，例如：:nth-child()可以挑選某個(gè)的一個(gè)或多個(gè)特定的子元素，你可以按以下的方式舉行挑選：:nth-child(length);/*參數(shù)是詳細(xì)數(shù)字*/:nth-child(n);/*參數(shù)是n,n從0開頭計(jì)算*/:nth-child(n*length)/*n的倍數(shù)挑選，n從0開頭算*/:

4、nth-child(n+length);/*挑選大于length后面的元素*/:nth-child(n*length+1);/*表示隔幾選一*/上面length為整數(shù):nth-child()可以定義他的值（值可以是整數(shù)，也可以是表達(dá)式），如上面所示，用來挑選特定的子元素，例如:nth-child(3),挑選某元素下的第三個(gè)子元素，（這里的3可以是你自己需要的數(shù)字），比如說，我需要挑選列表中的第三個(gè)li元素，那么我們可以挺直這樣用法：li:nth-child(3) background: f00;:nth-child(n)，其中n是一個(gè)容易的表達(dá)式，那么"n"取值是從0開頭計(jì)

5、算的，到什么時(shí)候結(jié)束我也不知道，假如你在實(shí)際應(yīng)用中挺直這樣用法的話，將會(huì)選中全部子元素，比如說，在我們的demo中，你在li中用法":nth-child(n)",那么將選中全部的"li",如：li:nth-child(n) background: ff0; 等于li background:ff0;他其實(shí)是這樣計(jì)算的n=0 —— 沒有挑選元素n=1 —— 挑選第一個(gè)li,n=2 —— 挑選其次個(gè)li,后在的依此類推，這樣下來就選中了全部的li請看效果：請注重了，這里的n只能是"

6、;n"，不能用法其他字母代替，不然會(huì)沒有任何效果的。不需要起名字了，對(duì)于我們前端人員來說我們就不需要去費(fèi)力心思去想各種名字，也不需要考慮是否符合命名規(guī)范，是否有利于seo的優(yōu)化等問題。更不需要考慮自己英文水平的問題。三、避開樣式矛盾問題，提高工作效率。之前我們用id或class名稱時(shí)常常會(huì)發(fā)生矛盾，比如你習(xí)慣給最上面的div起名為top，那么你的同事可能沒看你的文檔，他也習(xí)慣性的起了一個(gè)top的名稱，那么他的樣式寫在了后邊，你的樣式在前邊就會(huì)被他的樣式籠罩，由于我們的css樣式表的解析挨次是叢前向后生效的。這時(shí)候當(dāng)你發(fā)覺你寫好的樣式不對(duì)了，你就需要花費(fèi)時(shí)光去調(diào)節(jié)，這樣因?yàn)槊茉斐傻墓ぷ鲿r(shí)光的鋪張會(huì)影響我們的工作效率。不需要起名字，就不會(huì)浮現(xiàn)矛盾，那么工作效率自然就能提高。雖然現(xiàn)在還有好多掃瞄器不支持css3挑選器，例如ie6—&md