css 選擇器

時間 2019-11-09

標籤 css 選擇器欄目 CSS 简体版

原文原文鏈接

css是用於控制頁面佈局和顯示的語言。原理是，選中相應的對象，而後賦予它想要的佈局和樣式。須要經過選擇器來獲取目標對象。對CSS中的選擇器作一個常規的整理和分類。css

1. 選擇器html

要給對象設置樣式：選擇器，聲明（一個或者多個），聲明（屬性：值）組成，以下所示：佈局

selector { property1：value;property2:value;property3:value } declaretion聲明字體

2. 基本選擇器spa

CSS中的基本選擇器有三種：元素選擇器（標記，標籤），類選擇器，ID選擇器。ssr

<p class="red" id="notice">你們好</p>
對於這條HTML語句，要給他設置的樣式是字體是紅顏色的。
可使用選擇器： p{ } .red{ } #notice{ }
設置顏色：color:red;設計

可使用這三種基本選擇器中的任意一種便可完成顏色設置。code

2.1 元素選擇器：htm

找到document對象（html 文檔）下面的全部的符合要求的元素。個數是零個，一個或者多個。對象

2.2 類選擇器：

找出document對象（html 文檔）下面的全部類是指定類的對象。有零個，一個或者多個。

2.3 ID選擇器：

找出document對象（html 文檔）下面的全部的ID是指定ID的對象，多是零個，一個或者多個，嚴格要求下一個文檔中一個ID名只能用在一個對象上，因此個數爲零個或者一個，多個則是錯誤的用法。

3. 複合選擇器

在實際開發中前面提供的三種選擇器方式顯得比較侷限，可使用上面的三種選擇器擴展出不少複合型的，很是有用的選擇。有：分組選擇器，後代選擇器，子元素選擇器，相鄰兄弟選擇器，僞類選擇器，僞元素選擇器。爲頁面設計，提供了更多更豐富，更強大，更復雜的選擇器。

3.1 分組選擇器

分組選擇器不是一種特定的選擇器，而是將多選基本選擇器以及其餘類型的複合選擇器用逗號隔開，使用相同的樣式的選擇器。以下所示：

p,h1,span{} "p,h1,span"共同構成了一個組合選擇器，該選擇器中定義的樣式能夠同時應用到p元素中，h1元素中，span元素中，組合選擇器的成員能夠是相同類型的選擇器，也能夠是不一樣類型的選擇器。

3.2屬性選擇器

屬性選擇器，是根據指定的屬性找出全部有這個屬性的對象。並且這個屬性在對象中的存在形式也是多種多樣的。

<input type="text"/> <input type="button"/>
上面的這個HTML語句，咱們可使用上文說到的元素選擇器 input{} 進行選擇，可是若是頁面中有兩個input ，，是不一樣的類型。這是爲了給不一樣的input 設置不一樣的樣式，能夠採用屬性選擇器。
input [type="text"]{} input [type="button"]{} 這兩個選擇器及時屬性選擇器，能夠省略前面的input,屬性「type」在對象中的存在也有不少不一樣的形式。

[attribute] 用於選取帶有指定屬性的元素。

[attribute=value] 用於選取帶有指定屬性和值的元素。

[attribute~=value] 用於選取屬性值中包含指定詞彙的元素。

[attribute|=value] 用於選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞。

[attribute^=value] 匹配屬性值以指定值開頭的每一個元素。

[attribute$=value] 匹配屬性值以指定值結尾的每一個元素。

[attribute*=value] 匹配屬性值中包含指定值的每一個元素。

3.3 後臺選擇器

後代選擇器是選擇某個（祖先）選擇器的指定後代，這個後臺能夠是「兒子」也能夠是「孫子」，甚至更遠的關係。中間使用「」（空格）隔開。

如上面的HTML所示：<ul>的後代中有<li>，也有<ul>。 ul li{} 這個選擇器會選中全部的li元素。

3.4 子元素選擇器

子元素選擇器是選擇某個父選擇器的指定「兒子」，並且必須是「兒子」，使用「>」號鏈接。

在上面的HTML中，ul li{} 選中了全部的li，若是隻要選擇父元素ul下面的子元素li呢？這時就要用子元素選擇器ul > li{}了。可是這二者的區別在這兒體現的不明顯。

3.5 相鄰兄弟選擇器

相鄰兄弟選擇器是選擇擁有同一個父元素的全部（兄弟姐妹）元素。使用「+」號鏈接。

在上面的HTML中，第一個ul的子元素li之間是一種兄弟關係，第二個ul的子元素也是一種兄弟關係。

li + li {} 能選中兄弟關係的元素。

3.6 僞類選擇器

<a></a>錨的僞類有四種，分別表示超連接的不一樣狀態：

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

a:hover 必須被置於 a:link 和 a:visited 以後，纔是有效的。a:active 必須被置於 a:hover 以後，纔是有效的。