CSS是一種用于屏幕上渲染html，xml等一種語言，CSS主要是在相應的元素中應用樣式，來渲染相對應用的元素，那么這樣我們選擇相應的元素就很重要了，如何選擇對應的元素，此時就需要我們所說的選擇器。選擇器主要是用來確定html的樹形結構中的DOM元素節點。我把CSS選擇器分開成三部分，第一部分是我們常用的部分，我把他叫做基本選擇器；第二部分我把他稱作是屬性選擇器，第三部分我把他稱作偽類選擇器，這一部分也是最難理解和掌握的部分，今天我們先來看第一部分——基本選擇器。我們先來看一個常用的選擇器列表圖

選擇器例子例子描述CSS

.class	.intro	選擇 class="intro" 的所有元素。	1
#id	#firstname	選擇 id="firstname" 的所有元素。	1
*	*	選擇所有元素。	2
element	p	選擇所有 <p> 元素。	1
element,element	div,p	選擇所有 <div> 元素和所有 <p> 元素。	1
element element	div p	選擇 <div> 元素內部的所有 <p> 元素。	1
element>element	div>p	選擇父元素為 <div> 元素的所有 <p> 元素。	2
element+element	div+p	選擇緊接在 <div> 元素之后的所有 <p> 元素。	2
[attribute]	[target]	選擇帶有 target 屬性所有元素。	2
[attribute=value]	[target=_blank]	選擇 target="_blank" 的所有元素。	2
[attribute~=value]	[title~=flower]	選擇 title 屬性包含單詞 "flower" 的所有元素。	2
[attribute|=value]	[lang|=en]	選擇 lang 屬性值以 "en" 開頭的所有元素。	2
:link	a:link	選擇所有未被訪問的鏈接。	1
:visited	a:visited	選擇所有已被訪問的鏈接。	1
:active	a:active	選擇活動鏈接。	1
:hover	a:hover	選擇鼠標指針位于其上的鏈接。	1
:focus	input:focus	選擇獲得焦點的 input 元素。	2
:first-letter	p:first-letter	選擇每個 <p> 元素的首字母。	1
:first-line	p:first-line	選擇每個 <p> 元素的首行。	1
:first-child	p:first-child	選擇屬于父元素的第一個子元素的每個 <p> 元素。	2
:before	p:before	在每個 <p> 元素的內容之前插入內容。	2
:after	p:after	在每個 <p> 元素的內容之后插入內容。	2
:lang(language)	p:lang(it)	選擇帶有以 "it" 開頭的 lang 屬性值的每個 <p> 元素。	2
element1~element2	p~ul	選擇前面有 <p> 元素的每個 <ul> 元素。	3
[attribute^=value]	a[src^="https"]	選擇其 src 屬性值以 "https" 開頭的每個 <a> 元素。	3
[attribute$=value]	a[src$=".pdf"]	選擇其 src 屬性以 ".pdf" 結尾的所有 <a> 元素。	3
[attribute*=value]	a[src*="abc"]	選擇其 src 屬性中包含 "abc" 子串的每個 <a> 元素。	3
:first-of-type	p:first-of-type	選擇屬于其父元素的首個 <p> 元素的每個 <p> 元素。	3
:last-of-type	p:last-of-type	選擇屬于其父元素的最后 <p> 元素的每個 <p> 元素。	3
:only-of-type	p:only-of-type	選擇屬于其父元素唯一的 <p> 元素的每個 <p> 元素。	3
:only-child	p:only-child	選擇屬于其父元素的唯一子元素的每個 <p> 元素。	3
:nth-child(n)	p:nth-child(2)	選擇屬于其父元素的第二個子元素的每個 <p> 元素。	3
:nth-last-child(n)	p:nth-last-child(2)	同上，從最后一個子元素開始計數。	3
:nth-of-type(n)	p:nth-of-type(2)	選擇屬于其父元素第二個 <p> 元素的每個 <p> 元素。	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，但是從最后一個子元素開始計數。	3
:last-child	p:last-child	選擇屬于其父元素最后一個子元素每個 <p> 元素。	3
:root	:root	選擇文檔的根元素。	3
:empty	p:empty	選擇沒有子元素的每個 <p> 元素（包括文本節點）。	3
:target	#news:target	選擇當前活動的 #news 元素。	3
:enabled	input:enabled	選擇每個啟用的 <input> 元素。	3
:disabled	input:disabled	選擇每個禁用的 <input> 元素	3
:checked	input:checked	選擇每個被選中的 <input> 元素。	3
:not(selector)	:not(p)	選擇非 <p> 元素的每個元素。	3
::selection	::selection	選擇被用戶選取的元素部分。	3

下面我們先看看上表中基本的選擇器的使用方法和其所起的作用，為了更好的說明問題，先創建一個簡單的DOM結構，如下：

復制代碼 代碼如下:
<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>

給這個demo加上一些樣式，讓他好看一點

復制代碼 代碼如下:
.demo {
width: 300px;
border: 1px solid #ccc;
padding: 10px;
}
li {
float: left;
height: 20px;
line-height: 20px;
width: 20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
text-align: center;
background: #f36;
color: green;
margin-right: 5px;
}

初步效果如下所示：

?

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

復制代碼 代碼如下:
*{
marigin: 0;
padding: 0;
}

上面代碼大家在reset樣式文件中看到的肯定不少，他所表示的是，所有元素的margin和padding都設置為0，另外一種就是選擇某個元素下的所有元素：

復制代碼 代碼如下:
.demo * {border:1px solid blue;}

效果如下；

?

從上面的效果圖看，只要是div.demo下的元素邊框都加上了新的樣式。所有瀏覽器支持通配符選擇器。

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

復制代碼 代碼如下: li {background-color: grey;color: orange;}

上在表示選擇頁面的li元素，并設置了背景色和前景色，效果如下：

?

所有瀏覽器支持元素選擇器(E)。

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

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

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

?

類選擇器還可以結合元素選擇器來使用，比如說，你文檔中有好多個元素使用了類名“items”，但你只想在p元素這個類名上修改樣式，那么你可以這樣進行選擇并加上相應的樣式：
p.items {color: red;}
上面代碼只會匹配class 屬性包含important 的所有p 元素，但其他任何類型的元素都不匹配，包括有“items”這個類名的元素，上面也說過了“p.items”只會對p元素并且是其有一個類名叫“items”。不符合這兩個條件的都不會被選擇。

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

復制代碼 代碼如下:
.important {font-weight: bold;}
.active {color: green;background: lime;}
.items {color: #fff;background: #000;}
.important.items {background:#ccc;}
.first.last {color: blue;}

正如上面的代碼所示，".important.items"這個選擇器只對元素中同時包含了"important"和"items"兩個類才能起作用，如圖所示：

?

?

有一點大家需要注意，如果一個多類選擇器包含的類名中其中有一個不存在，那么這個選擇器將無法找到相匹配的元素 比如說下在這句代碼，他就無法到找相對應的的元素標簽，因為我們列表中只有一個li.first和一個li.last，不存在有一個叫li.first.last的列表項：

復制代碼 代碼如下:
.first.last {color: blue;}

所有瀏覽器都支持類選擇器，但多類選擇器（.className1.className2）不被ie6支持。

四、id選擇器（#ID）
ID選擇器和上面說的類選擇器是很相似的，在使用ID選擇器之前也需要先在html文檔中加注ID名稱，這樣在樣式選擇器中才能找到相對應的元素，不同的是ID選擇器是一個頁面中唯一的值，我們在類使用時是在相對應的類名前加上一個“.”號（.className）而id選擇器是在名稱前使用"#"如(#id),

復制代碼 代碼如下:
#first {background: lime;color: #000;}
#last {background: #000;color: lime;}

上在的代碼就是選擇了id為"first"和"last"的列表項，其效果如下

?

?

ID選擇器有幾個地方需要特別注意的，第一：一個文檔中一個id選擇器只充許使用一次，因為id在頁面中是唯一的；第二，id選擇器不能像類選擇器一樣多個合并使用，一個元素只能命名一個id名；第三，可以在不同的文檔中使用相同的id名，比如說在“test.html”中給h1定了“＃important”,也可以給“test1.html”中定義p的id為"#important"，但前提是不管在test.html還是test1.html中只充許有一個id叫"#important"的存在。

所有瀏覽器都支持ID選擇器。

那么什么時候采用id命名？什么時候采用類命名呢？我個人認為就是關鍵的一點就是具有唯一性使用id選擇器；公用的，類似的使用類選擇器。使用這兩個選擇器時，最好區別大小寫。

五、后代選擇器（Ｅ Ｆ）

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

.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)

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

復制代碼 代碼如下: li + li {background: green;color: yellow; border: 1px solid #ccc;}

上面代碼表示選擇li的相鄰元素li，我們這里一共有十個li，那么上面的代碼選擇了從第2個li到 10 個li，一共九個，請看效果：

?

?

因為上面的li+li其中第二li是第一li的相鄰元素，第三個又是第二個相鄰元素，因此第三個也被選擇，依此類推，所以后面九個li都被選中了，如果我們換過一種方式來看，可能會更好的理解一點：

復制代碼 代碼如下:
.active + li {background: green;color: yellow; border: 1px solid #ccc;}

按照前面所講的知識，這句代碼很明顯選擇了li.active后面相鄰的li元素，注意了和li.active后面相鄰的元素僅只有一個的。如圖：

?

?

IE6不支持這個選擇器

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

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

復制代碼 代碼如下: .active ~ li {background: green;color: yellow; border: 1px solid #ccc;}

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

?

?

通用兄弟選擇器和相鄰兄弟選擇器極其相似，只不過，相鄰兄弟選擇器僅選擇是元素的僅與其相鄰的后面元素（選中的僅一個元素）；而通用兄弟元素選擇器，選中的是元素相鄰的后面兄弟元素，這樣說起來可能會有迷糊，大家可以仔細看看其相鄰兄弟的效果圖。

IE6不支持這種選擇器的用法。

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

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

?

復制代碼 代碼如下: .first, .last {background: green;color: yellow; border: 1px solid #ccc;}

因為li.first和li.last具有相同的樣式效果，所以我們把他們寫到一個組里來：

?

?

所有瀏覽器都支持群組選擇器。

上面九種選擇器是CSS3中的基本選擇器，而我們最常用的是元素選擇器、類選擇器、ID選擇器、后代選擇器、群組選擇器，同時大家可以在實際應用中把這些選擇器結合起來使用，達到目的就行了。那么關于CSS3選擇器的第一部分——基本選擇器就介紹到這里，有點簡單，希望對初次接觸CSS的同學有所幫助，下節將介紹CSS3選擇器的第二部分——屬性選擇器，感興趣的朋友請觀注本站的更新。

如需轉載煩請注明出處：W3CPLUS

?

http://www.jb51.net/css/41450.html

轉載于:https://www.cnblogs.com/losesea/p/4394338.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的CSS3 选择器 基本选择器介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。