CSS3 基本選擇器

?

*	E	.class
#id	EF	E>F
E+F	E[attribute]	E[attribute=value]
E[attribute~=value]	E[attribute | = value]	:first-child
E[attribute^=value]	E[attribute$=value]	E[attribute*=value]
:lang()	:before	:after
:first-letter	::before	::after
::first-letter	:first-line	::first-line
E~F	:root	:last-child
:only-child	:nth-child()	:nth-last-child()
:first-of-type	:last-of-type	:only-of-type
:nth-of-type()	:nth-last-of-tyle()	:empty
:not()	:target	:enable
:disabled	:checked

為了更好的說明問題，先創(chuàng)建一個(gè)簡單的DOM結(jié)構(gòu)，如下：

<div class="demo">?
??? <ul class="clearfix">?
?????? <li id="first" class="first">1</li>?
????? ?<li class="active important">2</li>?
?????? <li class="important items">3</li>?
?????? <li class="important">4</li>?
?????? <li class="items">5</li>?
?????? <li>6</li>?
?????? <li>7</li>?
?????? <li>8</li>?
?????? <li>9</li>?
?????? <li id="last" class="last">10</li>?
?? </ul>?
</div>

一、通配符選擇器（＊）?
通配符選擇器是用來選擇所有元素，，也可以選擇某個(gè)元素下的所有元素。如：

代碼如下:
??? *{? marigin: 0;? padding: 0; }
上面代碼大家在reset樣式文件中看到的肯定不少，他所表示的是，所有元素的margin和padding都設(shè)置為0，另外一種就是選擇某個(gè)元素下的所有元素：?

代碼如下:

.demo * {border:1px solid blue;}

二、元素選擇器(E)?
元素選擇器，是css選擇器中最常見而且最基本的選擇器。元素選擇器其實(shí)就是文檔的元素，如html,body,p,div等等，比如我們這個(gè)demo：中元素包括了div,ul,li等。?

代碼如下:

li {background-color: grey;color: orange;}

三、類選擇器（.className）?
類選擇器是以一獨(dú)立于文檔元素的方式來指定樣式，使用類選擇器之前需要在html元素上定義類名，換句話說需要保證類名在html標(biāo)記中存在，這樣才能選擇類，如：?

<li class="active important items">2</li>?
共中“active,important, items”就是我們以類給li加上一個(gè)類名，以便類選擇器能正常工作，從而更好的將類選擇器的樣式與元素相關(guān)聯(lián)。?

.important {font-weight: bold; color: yellow;}?
上面代碼表示是給有important類名的元素加上一個(gè)“字體為粗體，顏色為×××”的樣式;

類選擇器還有可以具備多類名，上面我們也看到了，我們li元素中同時(shí)有兩個(gè)或多少類名，其中他們以空格隔開，那么選擇器也可以使用多類連接在一起，如：?

代碼如下:

.important {font-weight: bold;}?
.active {color: green;background: lime;}?
.items {color: #fff;background: #000;}?
.important.items {background:#ccc;}?
.first.last {color: blue;}

正如上面的代碼所示，".important.items"這個(gè)選擇器只對元素中同時(shí)包含了"important"和"items"兩個(gè)類才能起作用. 所有瀏覽器都支持類選擇器，但多類選擇器（.className1.className2）不被ie6支持。

五、后代選擇器（Ｅ Ｆ）

后代選擇器也被稱作包含選擇器,所起作用就是可以選擇某元素的后代元素，比如說:E F，前面E為祖先元素，Ｆ為后代元素，所表達(dá)的意思就是選擇了Ｅ元素的所有后代Ｆ元素，請注意他們之間需要一個(gè)空格隔開。這里Ｆ不管是E元素的子元素或者是孫元素或者是更深層次的關(guān)系，都將被選中，換句話說，不論Ｆ在Ｅ中有多少層關(guān)系，都將被選中：

.demo li {color: blue;}?
上面表示的是，選中div.demo中所有的li元素

?

六、子元素選擇器(E>F)

子元素選擇器只能選擇某元素的子元素，其中E為父元素，而F為子元素，其中E>F所表示的是選擇了Ｅ元素下的所有子元素Ｆ。這和后代選擇器（Ｅ Ｆ）不一樣，在后代選擇器中Ｆ是Ｅ的后代元素，而子元素選擇器Ｅ > F，其中Ｆ僅僅是Ｅ的子元素而以。
ul > li {background: green;color: yellow;}?
上在代碼表示選擇ul下的所有子元素li。如：?
IE6不支持子元素選擇器。

?

七、相鄰兄弟元素選擇器(E + F)

相鄰兄弟選擇器可以選擇緊接在另一元素后的元素，而且他們具有一個(gè)相同的父元素，換句話說，EF兩元素具有一個(gè)相同的父元素，而且Ｆ元素在Ｅ元素后面，而且相鄰，這樣我們就可以使用相鄰兄弟元素選擇器來選擇Ｆ元素。

代碼如下:

li + li {background: green;color: yellow; border: 1px solid #ccc;}

上面代碼表示選擇li的相鄰元素li，我們這里一共有十個(gè)li，那么上面的代碼選擇了從第2個(gè)li到 10 個(gè)li，一共九個(gè)?

IE6不支持這個(gè)選擇器

八、通用兄弟選擇器（Ｅ ～ Ｆ）

通用兄弟元素選擇器是CSS3新增加一種選擇器，這種選擇器將選擇某元素后面的所有兄弟元素，他們也和相鄰兄弟元素類似，需要在同一個(gè)父元素之中，換句話說，E和F元素是屬于同一父元素之內(nèi)，并且F元素在Ｅ元素之后，那么E ~ F 選擇器將選擇中所有Ｅ元素后面的Ｆ元素。比如下面的代碼：

代碼如下:

.active ~ li {background: green;color: yellow; border: 1px solid #ccc;}

上面的代碼所表示的是，選擇中了li.active 元素后面的所有兄弟元素li?

?

九、群組選擇器（selector1,selector2,...,selectorN）

群組選擇器是將具有相同樣式的元素分組在一起，每個(gè)選擇器之間使用逗號(hào)“，”隔開，如上面所示selector1,selector2,...,selectorN。這個(gè)逗號(hào)告訴瀏覽器，規(guī)則中包含多個(gè)不同的選擇器，如果不有這個(gè)逗號(hào)，那么所表達(dá)的意就完全不同了，省去逗號(hào)就成了我們前面所說的后代選擇器，這一點(diǎn)大家在使用中千萬要小心加小心。

駕駛式洗地機(jī)

轉(zhuǎn)載于:https://blog.51cto.com/8596863/1872109

總結(jié)

以上是生活随笔為你收集整理的CSS选择器详细介绍的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。