CSS選擇器

　　CSS選擇器的準確書寫，保證了元素應用樣式的正確性，CSS中選擇器主要包括：

一、元素選擇器：

　　最多見的 CSS 選擇器是元素選擇器。換句話說，文檔的元素就是最基本的選擇器。元素選擇器又稱爲類型選擇器（type selector）。類型選擇器匹配文檔語言元素類型的名稱。類型選擇器匹配文檔樹中該元素類型的每個實例。若是設置 HTML 的樣式，選擇器一般將是某個 HTML 元素，好比 p、h一、em、a，甚至能夠是 html 自己：

html {color:black;}
h1 {color:blue;}
p {color:silver;}

 

二、類選擇器：

　　類選擇器容許以一種獨立於文檔元素的方式來指定樣式。該選擇器能夠單獨使用，也能夠與其餘元素結合使用。只有適當地標記文檔後，才能使用這些選擇器，因此使用這兩種選擇器一般須要先作一些構想和計劃。要應用樣式而不考慮具體設計的元素，最經常使用的方法就是使用類選擇器。

　　若有這樣一段HTML代碼：

<h1 class="important">
This heading is very important.
</h1>

<p class="important">
This paragraph is very important.
</p>

　　若是隻想選擇全部類名相同的元素，能夠在類選擇器中忽略元素選擇器：

.important {color:red;}
或者
*.important {color:red;}

　　只想選中p時，類選擇器能夠結合元素選擇器來使用，選擇器如今會匹配 class 屬性包含 important 的全部 p 元素，可是其餘任何類型的元素都不匹配，不管是否有此 class 屬性。選擇器 p.important 解釋爲：「其 class 屬性值爲 important 的全部段落」。 由於 h1 元素不是段落，這個規則的選擇器與之不匹配，所以 h1 元素不會變成紅色文本。：

p.important {color:red;}

 

　　經過把兩個類選擇器連接在一塊兒，僅能夠選擇同時包含這些類名的元素（類名的順序不限）。若是一個多類選擇器包含類名列表中沒有的一個類名，匹配就會失敗。

.important.urgent {background:silver;}

　　這段代碼在如下元素中不能顯示：

<p class="important warning">
This paragraph is a very important warning.
</p>

　　可是在下面的元素中就能實現：

<p class="important urgent warning">
This paragraph is a very important and urgent warning.
</p>

 

三、id選擇器

　　在某些方面，ID 選擇器相似於類選擇器，不過也有一些重要差異。首先，ID 選擇器前面有一個 # 號 - 也稱爲棋盤號或井號。第二個區別是 ID 選擇器不引用 class 屬性的值，毫無疑問，它要引用 id 屬性中的值。

　　類選擇器能夠爲任意多個元素指定類。前一章中類名 important 被應用到 p 和 h1 元素，並且它還能夠應用到更多元素。

　　與類不一樣，在一個 HTML 文檔中，ID 選擇器會使用一次，並且僅一次。

　　不一樣於類選擇器，ID 選擇器不能結合使用，由於 ID 屬性不容許有以空格分隔的詞列表。

　　相似於類，能夠獨立於元素來選擇 ID。有些狀況下，您知道文檔中會出現某個特定 ID 值，可是並不知道它會出如今哪一個元素上，因此您想聲明獨立的 ID 選擇器。例如，您可能知道在一個給定的文檔中會有一個 ID 值爲 mostImportant 的元素。您不知道這個最重要的東西是一個段落、一個短語、一個列表項仍是一個小節標題。您只知道每一個文檔都會有這麼一個最重要的內容，它可能在任何元素中，並且只能出現一個。

四、後代、子級、同級選擇器

　　在 CSS1 中，經過這種方式來應用規則的選擇器被稱爲上下文選擇器 (contextual selectors)，這是因爲它們依賴於上下文關係來應用或者避免某項規則。在 CSS2 中，它們稱爲派生選擇器，可是不管你如何稱呼它們，它們的做用都是相同的。

　　派生選擇器容許你根據文檔的上下文關係來肯定某個標籤的樣式。經過合理地使用派生選擇器，咱們可使 HTML 代碼變得更加整潔。

　　派生選擇器包括選擇被包含元素的後代選擇器，選擇子級的子級選擇器，選擇相鄰的後面兄弟元素的相鄰同級選擇器，選擇後面兄弟元素的同級選擇器。

　　比方說，你但願列表中的 strong 元素變爲斜體字，而不是一般的粗體字，能夠這樣定義一個後代選擇器：

li strong {
    font-style: italic;
    font-weight: normal;
  }

　　這樣會選擇到li裏面全部的strong元素。

　　如HTML代碼所示：

<p><strong>我是粗體字，不是斜體字，由於我不在列表當中，因此這個規則對我不起做用</strong></p>

<ol>
<li><strong>我是斜體字。這是由於 strong 元素位於 li 元素內。</strong></li>
<li>我是正常的字體。</li>
</ol>

 

　　當li裏面存在strong和p，p裏面又有strong元素，這時想要選擇li的strong而不選中p裏面的strong時，能夠寫做：

<p><strong>我是粗體字，不是斜體字，由於我不在列表當中，因此這個規則對我不起做用</strong></p>

<ol>
<li>
　　<strong>我是斜體字。這是由於 strong 元素位於 li 元素內。</strong>
　　<p>我是普通文字樣式<strong>我是粗體但不是斜體，我不是li的子級元素</strong></P>
</li>
<li>我是正常的字體。</li>
</ol>

 

　　此時的css代碼應當寫做：

li>strong {
    font-style: italic;
    font-weight: normal;
  }

 

　　當但願實現選中標題下面的第一個段落設置爲粗體，而不會選中後面的段落時，可使用選擇相鄰的同級選擇器：

<h1>我是標題，沒有設置任何樣式</h1>
<p>我是h1相鄰的兄弟元素，我是粗體</P>
<p>我不是相鄰的兄弟元素，我不是粗體</p>

 

　　對應的css代碼應當寫做：

h1+p{
     font-weight: bold;          
 }

 

　　當h1後面還跟有其他的元素，如div時，h1後面只能跟div，再寫p時沒法選中段落，由於此時h1和p已經不是相鄰關係。若是想要選中後面的其他兄弟元素，應當使用：

h1~p{
  font-weight: bold;  
}

 

　　樣式將會設置到每個前面有h1兄弟元素的p上面。

五、屬性選擇器

　　能夠爲擁有指定屬性的 HTML 元素設置樣式，而不只限於 class 和 id 屬性。只有在規定了 !DOCTYPE 時，IE7 和 IE8 才支持屬性選擇器。在 IE6 及更低的版本中，不支持屬性選擇。

　　下面的例子爲帶有 title 屬性的全部元素設置樣式：

[title]
{
color:red;
}

　　當想要指定屬性爲某一屬性值時，如爲 title="hello" 的全部元素設置樣式：

[title=W3School]
{
border:5px solid blue;
}

 

　　當屬性的值爲多個值時，下面的例子爲包含指定值的 title 屬性的全部元素設置樣式。適用於由空格分隔的屬性值：

[title~=hello] { color:red; }

 

　　帶有包含指定值的 lang 屬性的全部元素設置樣式。適用於由連字符分隔的屬性值：

[lang|=en] { color:red; }

　　當屬性值以某段字符開始時，選中這些元素設置樣式：

[title^=hello] { color:red; }

 

　　當屬性值包含某段字符時，選中這些元素設置樣式：

[title*=hello] { color:red; }

 

　　當屬性值以某段字符結束時，選中這些元素設置樣式：

[title$=hello] { color:red; }

　　屬性選擇器能夠配合基本選擇器使用，這樣只會選中對應屬性的這一種標籤。另外，屬性選擇器在爲不帶有 class 或 id 的表單設置樣式時特別有用：

input[type="text"]
{
  width:150px;
  display:block;
  margin-bottom:10px;
  background-color:yellow;
  font-family: Verdana, Arial;
}

input[type="button"]
{
  width:120px;
  margin-left:35px;
  display:block;
  font-family: Verdana, Arial;
}

 

六、僞類選擇器和僞元素選擇器

　　常見的僞類選擇器：

　　:link　　

　　:hover

　　:active

　　:visited

　　:lang

　　結構性的僞類選擇器包括有

　　:root()選擇器，從字面上咱們就能夠很清楚的理解是根選擇器，他的意思就是匹配元素E所在文檔的根元素。在HTML文檔中，根元素始終是<html>。:root選擇器等同於<html>元素。

　　:not()選擇器稱爲否認選擇器，能夠選擇除某個元素以外的全部元素。

　　:empty()選擇器表示的就是空。用來選擇沒有任何內容的元素，這裏沒有內容指的是一點內容都沒有，哪怕是一個空格。

　　:target()選擇器來對頁面某個target元素(該元素的id被當作頁面中的超連接來使用)指定樣式，該樣式只在用戶點擊了頁面中的超連接，而且跳轉到target元素後起做用。

　　:nth-child()  /  :nth-of type選擇某個元素的一個或多個特定的子元素。（選擇元素中的第一個子元素，:first-child() ，一樣能夠適用於倒數在中間加上last便可，以及only-child指定惟一子元素）

　　僞元素選擇器包括（自己爲兩個冒號，如今習慣寫做一個冒號）：

　　:first-line  /  :first-letter選擇器選擇元素的第一行  /  第一個字母，好比說改變每一個段落的第一行文本的樣式，咱們就可使用這個

　　:before和:after這兩個主要用來給元素的前面或後面插入內容，這兩個經常使用"content"配合使用，見過最多的就是清除浮動，也能夠用來繪製三角形或者對話框，清除浮動將after設置爲塊級元素，在進行clear

　　::selection選擇被用戶選取的元素部分。

七、選擇器總覽

 　　 查看更多選擇器戳這裏