CSS3 選擇器大概有一下幾個(gè)類(lèi)型：
成都創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),船營(yíng)企業(yè)網(wǎng)站建設(shè),船營(yíng)品牌網(wǎng)站建設(shè),網(wǎng)站定制,船營(yíng)網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷(xiāo),網(wǎng)絡(luò)優(yōu)化,船營(yíng)網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力。可充分滿(mǎn)足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專(zhuān)業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶(hù)成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。
全局選擇器????Universal Selector
類(lèi)型選擇器????Type Selector
屬性選擇器????Attribute Selectors
偽類(lèi)????Pseudo-classes
偽元素????Pseudo-element
Class 選擇器????Class Selectors
ID 選擇器????ID?Selectors
選擇符????Combinator
下面是 W3C 官網(wǎng)上關(guān)于 Selector Level 3 的一個(gè)表格。我翻譯了一下。
不同瀏覽器對(duì) CSS 選擇器有不同程度的支持，目前的瀏覽器（IE9前除外）已經(jīng)支持了下面的絕大部分選擇器。
* ? ?任何元素
E ? ?一個(gè) E 類(lèi)型的元素 ?
E[foo] ? ?擁有“foo”屬性的E 元素
E[foo="bar"] ? ?擁有屬性值等于“bar”的“foo”屬性的 E 元素
E[foo~="bar"] ? ?一個(gè) E 元素，它的“foo”屬性值是通過(guò)空格分開(kāi)的一系列的值，其中有一個(gè)值等于“bar”
E[foo^="bar"] ? ?一個(gè) E 元素，它的“foo”屬性的值是一個(gè)以“bar”開(kāi)頭的字符串
E[foo$="bar"] ? ?一個(gè) E 元素，它的“foo”屬性的值是一個(gè)以“bar”結(jié)尾的字符串
E[foo*="bar"] ? ?一個(gè) E 元素，它的“foo”屬性值包含字符串“bar”
E[foo|="en"] ? ?一個(gè) E 元素，它的“foo”屬性的值是通過(guò)連字符（-）分割的一系列的值的字符串，其中有一個(gè)值是以“en”開(kāi)頭 ?
E:root ? ?一個(gè) E 元素，是文檔的根元素
E:nth-child(n) ? ?一個(gè) E 元素，是它父元素的第 n 個(gè)子元素
E:nth-last-child(n) ? ?一個(gè) E 元素，是它父元素的倒數(shù)第 n 個(gè)子元素
E:nth-of-type(n) ? ?一個(gè) E 元素，在它同類(lèi)型的兄弟元素中排在第 n 個(gè)
E:nth-last-of-type(n) ? ?一個(gè) E 元素，在它同類(lèi)型的兄弟元素中排行倒數(shù)第 n 個(gè)
E:first-child ? ?一個(gè) E 元素，是它父元素的第一個(gè)子元素
E:last-child ? ?一個(gè) E 元素，是它父元素的最后一個(gè)子元素
E:first-of-type ? ?一個(gè) E 元素，是它同類(lèi)型兄弟元素中的第一個(gè)
E:last-of-type ? ?一個(gè) E 元素，是它同類(lèi)型的兄弟元素中的最后一個(gè)
E:only-child ? ?一個(gè) E 元素，是它父元素的唯一一個(gè)子元素
E:only-of-type ? ?一個(gè) E 元素，是它同類(lèi)型的兄弟元素的唯一一個(gè)（沒(méi)有別的同類(lèi)的兄弟）
E:empty ? ?一個(gè)沒(méi)有子元素的 E 元素
E:link????一個(gè)沒(méi)有被訪(fǎng)問(wèn)過(guò)的，作為超鏈接的錨點(diǎn)的 E 元素
E:visited ? ?一個(gè)被訪(fǎng)問(wèn)過(guò)的錨點(diǎn) E 元素 ?
E:active? ? 一個(gè)正處于某些用戶(hù)操作狀態(tài)的 E 元素
E:hover????一個(gè)鼠標(biāo)滑過(guò)的 E 元素
E:focus ? ? 一個(gè)獲得用戶(hù)焦點(diǎn)的 E 元素
E:target ? ?一個(gè)做為起 Refer 制定錨點(diǎn)的元素（url hash 相關(guān)）
E:lang(fr) ? ?一個(gè) language 是 fr 的 E 元素 ?
E:enabled????一個(gè)UI 操作上 enabled 的 E 元素
E:disabled ? ?一個(gè) UI 操作上 disabled 的 E 元素 ?
E:checked ? ?一個(gè) UI 操作上狀態(tài)為 checked 的 E 元素
E::first-line ? ?E 元素中格式化后的第一行
E::first-letter ? ?E 元素的第一個(gè)字母
E::before ? ?在 E 元素之前生成的內(nèi)容
E::after ? ? 在 E 元素之后生成的內(nèi)容
E.warning ? ?一個(gè)class 屬性包含 warning 的 E 元素
E#myid ? ?一個(gè) ID 為 myid 的 E 元素
E:not(s) ? ?一個(gè)不匹配簡(jiǎn)單的選擇器 s 的 E 元素
E F ? ?一個(gè)作為 E 元素后代的 F 元素
E F ? ?一個(gè)作為 E 元素子元素的 F 元素
E + F ? ?一個(gè)緊跟在 E 元素后面的 F 元素
E ~ F ? ?一個(gè)出現(xiàn)在 E 元素前面（緊挨著）的 F 元素
每天一更新，這些初級(jí)html知識(shí)你掌握了嗎？
css選擇器的優(yōu)先級(jí)：作用的元素一樣，樣式一樣，就會(huì)有優(yōu)先級(jí)問(wèn)題。
* 通配選擇器 0
* 標(biāo)簽名選擇器 1
* 類(lèi)選擇器 10
* id選擇器 100
* 后代選擇器 選擇器1 選擇器2 ...（會(huì)有相加的過(guò)程）
* 群組選擇器 選擇器1,選擇器2,... (不會(huì)有相加的過(guò)程)
注意：
* 1.相同類(lèi)型的選擇器 樣式?jīng)_突下 后覆蓋前
* 2.不同類(lèi)型的選擇器 樣式?jīng)_突下 優(yōu)先級(jí)高覆蓋優(yōu)先級(jí)低
* 3.* Tags class id style !important
* 4.!important慎用(非得用的時(shí)候，要加注釋說(shuō)明一下)
HTML5向Web API新引入了document.querySelector以及document.querySelectorAll兩個(gè)方法用來(lái)更方便地從DOM選取元素，功能類(lèi)似于jQuery的選擇器。這使得在編寫(xiě)原生JavaScript代碼時(shí)方便了許多.如：
標(biāo)簽選擇
element = document.querySelector('selectors');
elementList = document.querySelectorAll('selectors');
多標(biāo)簽
element = document.querySelector('selector1,selector2,...');
elementList = document.querySelectorAll('selector1,selector2,...');
iD 和class
element = document.querySelector('div#container');//返回id為container的首個(gè)div
element = document.querySelector('.foo,.bar');//返回帶有foo或者bar樣式類(lèi)的首個(gè)元素
elements = document.querySelectorAll('div.foo');//返回所有帶foo類(lèi)樣式的div
jQuery本身在dom操作上速度就一般，jQuery只是原生JS的一個(gè)自定義框架，速度首先敢原生就差很遠(yuǎn)了。所以JQ跟HTML5原生自帶的選擇器根本就沒(méi)辦法比。當(dāng)然有時(shí)候和JQ結(jié)合速度也會(huì)比你只使用上面說(shuō)的選擇器快，首先您得記住將DOM緩存起來(lái) 如：
var a=$("#a");//緩存元素
var b=$("#a").find(".b");//緩存元素
function doa(){
b.toggle();
}
//如果我們要執(zhí)行一個(gè)點(diǎn)擊就讓b顯示隱藏的話(huà)，也就是多次操作該DOM，上面的寫(xiě)法要比下面的快很多很多
function doa(){
y$("#a").find(".b").toggle();
}
#div:not(':last-child')
選擇id=div的除了最后一個(gè)子元素以外的所有子元素
#div:not(p) 選擇id=div的元素下所有不是p元素的子元素
標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用HTML標(biāo)準(zhǔn)自1999年12月發(fā)布的HTML4.01后，后繼的HTML5和其它標(biāo)準(zhǔn)被束之高閣，為了推動(dòng)Web標(biāo)準(zhǔn)化運(yùn)動(dòng)的發(fā)展，一些公司聯(lián)合起來(lái)，成立了一個(gè)叫做 Web Hypertext Application Technology Working Group （Web超文本應(yīng)用技術(shù)工作組 -WHATWG） 的組織。WHATWG 致力于 Web 表單和應(yīng)用程序，而W3C（World Wide Web Consortium，萬(wàn)維網(wǎng)聯(lián)盟） 專(zhuān)注于XHTML2.0。在 2006 年，雙方?jīng)Q定進(jìn)行合作，來(lái)創(chuàng)建一個(gè)新版本的 HTML。
HTML5草案的前身名為 Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接納，并成立了新的 HTML 工作團(tuán)隊(duì)。
HTML 5 的第一份正式草案已于2008年1月22日公布。HTML5 仍處于完善之中。然而，大部分現(xiàn)代瀏覽器已經(jīng)具備了某些 HTML5 支持。
2012年12月17日，萬(wàn)維網(wǎng)聯(lián)盟（W3C）正式宣布凝結(jié)了大量網(wǎng)絡(luò)工作者心血的HTML5規(guī)范已經(jīng)正式定稿。根據(jù)W3C的發(fā)言稿稱(chēng)：“HTML5是開(kāi)放的Web網(wǎng)絡(luò)平臺(tái)的奠基石?！?/p>
2013年5月6日， HTML 5.1正式草案公布。該規(guī)范定義了第五次重大版本，第一次要修訂萬(wàn)維網(wǎng)的核心語(yǔ)言：超文本標(biāo)記語(yǔ)言（HTML）。在這個(gè)版本中，新功能不斷推出，以幫助Web應(yīng)用程序的作者，努力提高新元素互操作性。
本次草案的發(fā)布，從2012年12月27日至今，進(jìn)行了多達(dá)近百項(xiàng)的修改，包括HTML和XHTML的標(biāo)簽，相關(guān)的API、Canvas等，同時(shí)HTML5的圖像img標(biāo)簽及svg也進(jìn)行了改進(jìn)，性能得到進(jìn)一步提升。
支持Html5的瀏覽器包括Firefox（火狐瀏覽器），IE9及其更高版本，Chrome（谷歌瀏覽器），Safari，Opera等；國(guó)內(nèi)的傲游瀏覽器（Maxthon），以及基于IE或Chromium（Chrome的工程版或稱(chēng)實(shí)驗(yàn)版）所推出的360瀏覽器、搜狗瀏覽器、QQ瀏覽器、獵豹瀏覽器等國(guó)產(chǎn)瀏覽器同樣具備支持HTML5的能力。
HTML5前端的選擇器一般有js選擇器和css選擇器
其中css選擇器上面的網(wǎng)友回答的很全面了使用pimg就可以了。
js選擇器一般使用jquery選擇器，而jquery選擇器可以通過(guò)id或者class樣式或者元素類(lèi)型進(jìn)行選擇，子選擇器可以用find或者children查找。
重慶分公司
重慶分公司
