css選擇器

1. ~選擇器

爲全部相同的父元素中位於 p 元素以後的全部 ul 元素設置背景：

{
background:#ff0000;
}
p~ul

定義和用法

element1~element2 選擇器 element1 以後出現的全部 element2。

兩種元素必須擁有相同的父元素，可是 element2 沒必要直接緊隨 element1。

2. .選擇器

爲 class="hometown" 的全部 <p> 元素設置樣式：

p.hometown
{ 
background-color:yellow;
}

而後咱們使用如下語法向這些歸類的元素應用樣式，即類名前有一個點號（.），而後結合通配選擇器：

*.important {color:red;}

若是您只想選擇全部類名相同的元素，能夠在類選擇器中忽略通配選擇器，這沒有任何很差的影響：

.important {color:red;}

經過把兩個類選擇器連接在一塊兒，僅能夠選擇同時包含這些類名的元素（類名的順序不限）。

若是一個多類選擇器包含類名列表中沒有的一個類名，匹配就會失敗。請看下面的規則：

.important.urgent {background:silver;}

不出所料，這個選擇器將只匹配 class 屬性中包含詞 important 和 urgent 的 p 元素。所以，若是一個 p 元素的 class 屬性中只有詞 important 和 warning，將不能匹配。不過，它能匹配如下元素：

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

3.#選擇器

4.屬性選擇器

還能夠根據多個屬性進行選擇，只需將屬性選擇器連接在一塊兒便可。

例如，爲了將同時有 href 和 title 屬性的 HTML 超連接的文本設置爲紅色，能夠這樣寫：

a[href][title] {color:red;}

能夠採用一些創造性的方法使用這個特性。

例如，能夠對全部帶有 alt 屬性的圖像應用樣式，從而突出顯示這些有效的圖像：

img[alt] {border: 5px solid red;}

與簡單屬性選擇器相似，能夠把多個屬性-值選擇器連接在一塊兒來選擇一個文檔。

a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}

屬性與屬性值必須徹底匹配

請注意，這種格式要求必須與屬性值徹底匹配。

若是屬性值包含用空格分隔的值列表，匹配就可能出問題。

請考慮一下的標記片斷：

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

若是寫成 p[class="important"]，那麼這個規則不能匹配示例標記。

要根據具體屬性值來選擇該元素，必須這樣寫：

p[class="important warning"] {color: red;}

根據部分屬性值選擇

若是須要根據屬性值中的詞列表的某個詞進行選擇，則須要使用波浪號（~）。

假設您想選擇 class 屬性中包含 important 的元素，能夠用下面這個選擇器作到這一點：

p[class~="important"] {color: red;}

分值屬性選擇器與點號類名記法的區別

該選擇器等價於咱們在類選擇器中討論過的點號類名記法。

也就是說，p.important 和 p[class="important"] 應用到 HTML 文檔時是等價的。

那麼，爲何還要有 "~=" 屬性選擇器呢？由於它能用於任何屬性，而不僅是 class。

例如，能夠有一個包含大量圖像的文檔，其中只有一部分是圖片。對此，可使用一個基於 title 文檔的部分屬性選擇器，只選擇這些圖片：

img[title~="Figure"] {border: 1px solid gray;}

　5後代選擇器

 

根據上下文選擇元素

咱們能夠定義後代選擇器來建立一些規則，使這些規則在某些文檔結構中起做用，而在另一些結構中不起做用。

舉例來講，若是您但願只對 h1 元素中的 em 元素應用樣式，能夠這樣寫：

h1 em {color:red;}

上面這個規則會把做爲 h1 元素後代的 em 元素的文本變爲 紅色。其餘 em 文本（如段落或塊引用中的 em）則不會被這個規則選中：

<h1>This is a <em>important</em> heading</h1> <p>This is a <em>important</em> paragraph.</p>

6.CSS 子元素選擇器

選擇子元素

若是您不但願選擇任意的後代元素，而是但願縮小範圍，只選擇某個元素的子元素，請使用子元素選擇器（Child selector）。

例如，若是您但願選擇只做爲 h1 元素子元素的 strong 元素，能夠這樣寫：

h1 > strong {color:red;}

這個規則會把第一個 h1 下面的兩個 strong 元素變爲紅色，可是第二個 h1 中的 strong 不受影響：

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>---------爲「選擇做爲 h1 元素子元素的全部 strong 元素」。
<h1>This is <em>really <strong>very</strong></em> important.</h1>

7. CSS 相鄰兄弟選擇器

選擇相鄰兄弟

若是須要選擇緊接在另外一個元素後的元素，並且兩者有相同的父元素，可使用相鄰兄弟選擇器（Adjacent sibling selector）。

例如，若是要增長緊接在 h1 元素後出現的段落的上邊距，能夠這樣寫：

h1 + p {margin-top:50px;}

這個選擇器讀做：「選擇緊接在 h1 元素後出現的段落，h1 和 p 元素擁有共同的父元素」。

8.

錨僞類

在支持 CSS 的瀏覽器中，連接的不一樣狀態均可以不一樣的方式顯示，這些狀態包括：活動狀態，已被訪問狀態，未被訪問狀態，和鼠標懸停狀態。

 {color: #FF0000}		/* 未訪問的連接 */
 {color: #00FF00}	/* 已訪問的連接 */
 {color: #FF00FF}	/* 鼠標移動到連接上 */
 {color: #0000FF}	/* 選定的連接 */
a:linka:visiteda:hovera:active

僞類與 CSS 類

僞類能夠與 CSS 類配合使用：

a : visited {color: #FF0000}

<a class="" href="css_syntax.asp">CSS Syntax</a>.redred

假如上面的例子中的連接被訪問過，那麼它將顯示爲紅色。