CSS的五種基本選擇器

要使用css對HTML頁面中的元素實現一對一，一對多或者多對一的控制，這就須要用到CSS選擇器。

㈠什麼是選擇器？

每一條css樣式定義由兩部分組成，形式以下： [code] 選擇器{樣式} [/code] 在{}以前的部分就是「選擇器」。

「選擇器」指明瞭{}中的「樣式」的做用對象，也就是「樣式」做用於網頁中的哪些元素。

 

㈡CSS的五大選擇器

⑴標籤選擇器（元素選擇器）

⑵ID選擇器（惟一性，一次引用）

⑶類選擇器（單類選擇器，多類選擇器）

⑷屬性選擇器（簡單屬性選擇，具體屬性選擇，部分屬性選擇， 特定屬性選擇）

⑸派生選擇器（後代選擇器(descendant selector)，子元素選擇器(child selector)，相鄰兄弟選擇器(Adjacent sibling selector)）

 

㈢元素選擇器（標籤選擇器）

一個完整的HTML頁面是由不少不一樣的標籤組成。標籤選擇器：指用HTML標籤名稱做爲選擇器，按標籤名稱分類，爲頁面中某一類標籤指定統一的CSS樣式。

若是設置 HTML 的樣式，選擇器一般將是某個 HTML 元素，好比 p、h一、em、a，甚至能夠是 html 自己。

 

例如：

html {background-color: black;}

p {font-size: 30px; backgroud-color: gray;}

h2 {background-color: red;}

以上css代碼會對整個文檔添加黑色背景；將全部p元素字體大小設置爲30像素同時添加灰色背景；對文檔中全部h2元素添加紅色背景。

 

㈣ID 選擇器

⑴ID 選擇器容許以一種獨立於文檔元素的方式來指定樣式。

⑵ID 選擇器能夠爲標有特定 ID 的 HTML 元素指定特定的樣式。 根據元素ID來選擇元素，具備惟一性，這意味着同一id在同一文檔頁面中只能出現一次。

⑶id 選擇器以 "#" 來定義。

 

例如：在css中，下面的兩個 id 選擇器，第一個能夠定義元素的顏色爲紅色，第二個定義元素的顏色爲黃色：

    #red{color：red；}

   #yellow{color：yellow；}

下面的 HTML 代碼中，id 屬性爲 red 的 p 元素顯示爲紅色，而 id 屬性爲 green 的 p 元素顯示爲綠色。

  <p id="red">這個段落是紅色。</p>

  <p id="yellow">這個段落是黃色。</p>

 

㈤類選擇器

類選擇器使用類名來選擇元素，前提是要在HTML中，給元素定義一個class的屬性，class="類名"，而後使用"."進行標識，後面緊跟類名。

(1)單類選擇器

類選擇器容許以一種獨立於文檔元素的方式來指定樣式。該選擇器能夠單獨使用，也能夠與其餘元素結合使用。

①修改 HTML 代碼

在使用類選擇器以前，須要修改具體的文檔標記，以便類選擇器正常工做。爲了將類選擇器的樣式與元素關聯，必須將 class 指定爲一個適當的值。

請看下面的 HTML 代碼：

<h1 class="important">

This heading is very important

</h1>

 

<p class="impportant">

This paragraph is very important.

</p>

在上面的代碼中，兩個元素的 class 都指定爲 important：第一個標題（ h1 元素），第二個段落（p 元素）。

 

②語法

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

*.important {color:red;}

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

.important {color:red;}

 

③結合元素選擇器

類選擇器能夠結合元素選擇器來使用。

♧例如，只讓段落顯示爲紅色文本：

p.important {color:red;}

選擇器如今會匹配 class 屬性包含 important 的全部 p 元素，可是其餘任何類型的元素都不匹配，不管是否有此 class 屬性。

選擇器 p.important 解釋爲：「其 class 屬性值爲 important 的全部段落」。 由於 h1 元素不是段落，這個規則的選擇器與之不匹配，所以 h1 元素不會變成紅色文本。

 

♧例如：爲 h1 元素指定不一樣的樣式，可使用選擇器 h1.important：

p.important {color:red;}

h1.important {color:blue;}

 

⑵多類選擇器

在 HTML 中，一個 class 值中可能包含一個詞列表，各個詞之間用空格分隔。

例如，若是但願將一個特定的元素同時標記爲重要（important）和警告（warning），就能夠寫做：

          <p class="important warning">

                This paragraph is very important warning.

           </p>

注：這兩個詞的順序可有可無，寫成 warning important 也能夠。

 

假設 class 爲 important 的全部元素都是粗體，而 class 爲 warning 的全部元素爲斜體，class 中同時包含 important 和 warning 的全部元素還有一個銀色的背景 。

就能夠寫做：

.important {font-weight:bold;}

.warning{font-style:italic;}

.important .warning{background:silver;}

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

若是一個多類選擇器包含類名列表中沒有的一個類名，匹配就會失敗。

 

㈥屬性選擇器

屬性選擇器能夠根據元素的屬性及屬性值來選擇元素。

⑴簡單屬性選擇

若是但願選擇有某個屬性的元素，而不論屬性值是什麼，可使用簡單屬性選擇器。

例子 1:把包含標題（title）的全部元素變爲紅色，能夠寫做：

*[title] {color:red;}

 

例子 2:只對有 href 屬性的錨（a 元素）應用樣式：

a[herf] {color:red;}

 

例子 3:根據多個屬性進行選擇，只需將屬性選擇器連接在一塊兒便可。

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

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

 

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

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

 

⑵根據具體屬性值選擇

例子 1:將指向 Web 服務器上某個指定文檔的超連接變成紅色，能夠這樣寫：

a [href="http://www.baidu.com"] {color:red;}

 

例子 2:把多個屬性-值選擇器連接在一塊兒來選擇一個文檔。

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

這會把第一個超連接的文本變爲紅色，可是第二個或第三個連接不受影響：

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

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

 

⑶根據部分屬性值選擇

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

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

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

注意：若是忽略了波浪號，則說明須要完成徹底值匹配。

 

⑷特定屬性選擇類型

舉例：*[lang |="en"] {color:red;}

上面這個規則會選擇 lang 屬性等於 en 或以 en- 開頭的全部元素。所以，如下示例標記中的前三個元素將被選中，而不會選擇後兩個元素：

 

㈦後代選擇器

⑴後代選擇器（descendant selector）又稱爲包含選擇器。後代選擇器能夠選擇做爲某元素後代的元素。

⑵在後代選擇器中，規則左邊的選擇器一端包括兩個或多個用空格分隔的選擇器。選擇器之間的空格是一種結合符（combinator）。

⑶每一個空格結合符能夠解釋爲「... 在 ... 找到」、「... 做爲 ... 的一部分」、「... 做爲 ... 的後代」，可是要求必須從右向左讀選擇器。

 

舉例：只對 h1 元素中的 em 元素應用樣式，能夠這樣寫：

           h1 em {colopr:red;}

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

⑵h1 em 選擇器能夠解釋爲 「做爲 h1 元素後代的任何 em 元素」。若是要從左向右讀選擇器，能夠換成如下說法：「包含 em 的全部 h1 會把如下樣式應用到該 em」。

 

具體應用：

可使 HTML 中不可能實現的任務成爲可能。假設有一個文檔，其中有一個邊欄，還有一個主區。邊欄的背景爲藍色，主區的背景爲白色，這兩個區都包含連接列表。不能把全部連接都設置爲藍色，由於這樣一來邊欄中的藍色連接都沒法看到。解決方法是使用後代選擇器。在這種狀況下，能夠爲包含邊欄的 div 指定值爲 sidebar 的 class 屬性，並把主區的 class 屬性值設置爲 maincontent。

編寫如下樣式：

div.sidebar {background:blue;}

div.maincontent {background:white;]

div.sidebar a:link {color:white;}

div.maincontent a:link {color:blue;}

 

㈧子元素選擇器

⑴子元素選擇器（Child selectors）只能選擇做爲某元素子元素的元素。

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

⑶子選擇器使用了大於號（子結合符）。子結合符兩邊能夠有空白符，這是可選的。

 

例如：選擇只做爲 h1 元素子元素的 strong 元素，能夠這樣編寫：

          h1 > strong {color:red;}

         若是從右向左讀，選擇器 h1 > strong 能夠解釋爲「選擇做爲 h1 元素子元素的全部 strong 元素」。

       

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

       

 

 

㈨相鄰兄弟選擇器

⑴相鄰兄弟選擇器（Adjacent sibling selector）可選擇緊接在另外一元素後的元素，且兩者有相同父元素。

⑵相鄰兄弟選擇器使用了加號（+），即相鄰兄弟結合符（Adjacent sibling combinator）。與子結合符同樣，相鄰兄弟結合符旁邊能夠有空白符。

 

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

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

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

 

具體解釋:請看下面這個文檔樹片斷：

在上面的片斷中，div 元素中包含兩個列表：一個無序列表，一個有序列表，每一個列表都包含三個列表項。這兩個列表是相鄰兄弟，列表項自己也是相鄰兄弟。

不過，第一個列表中的列表項與第二個列表中的列表項不是相鄰兄弟，由於這兩組列表項不屬於同一父元素（最多隻能算堂兄弟）。

簡單來講：ul與ol是相鄰兄弟，而ul裏面的列表項與ol裏面的列表項不是相鄰兄弟。

 

注意：用一個結合符只能選擇兩個相鄰兄弟中的第二個元素。請看下面的選擇器：

li + li {font-weight:bold;}

上面這個選擇器只會把列表中的第二個和第三個列表項變爲粗體。第一個列表項不受影響。

 

參考：https://www.w3school.com.cn

 

    但願有所幫助。