CSS選擇器

Juven 發(fā)布于2019-08-30 12:50 / 1562人閱讀

摘要：子選擇器用兩個(gè)常用選擇器，中間通過進(jìn)行選擇。注意不要和子選擇器選擇對象范圍混淆例如測試子選擇器第一個(gè)標(biāo)簽第二個(gè)標(biāo)簽父元素的后代中的所有元素的字體都會(huì)被設(shè)置成紅色。通配選擇器通用選擇器用來表示選擇作用于所有元素。

CSS選擇器（Selectors ）
一、CSS選擇器作用
CSS選擇器可用于實(shí)現(xiàn)對HTML網(wǎng)頁上的元素樣式的一對一，一對多或者多對一的控制。

二、CSS選擇器的種類（這里介紹常用的）

標(biāo)簽選擇器（Type selectors ）：直接引用HTML中的標(biāo)簽控制相應(yīng)元素樣式。
例如：

P {
  font-size: 1.25em;
  color: yellow;
}
//  P標(biāo)簽內(nèi)的字體大小為1.25em,字體顏色為黃色.

類選擇器（Class Selectors ）：利用自行定義的類名控制相應(yīng)元素樣式，用“.”來標(biāo)志。
例如：

.className{
background-color: red;
}
//  設(shè)置className類的背景顏色為紅色。

ID選擇器（ID Selectors)：利用自行定義的ID名（ID名需唯一）控制相應(yīng)元素樣式，用“#”來標(biāo)志。（因?yàn)檫x擇器級(jí)聯(lián)關(guān)系，建議非必要時(shí)，少用）
例如：

#idName{
width:200px;
height:200px;
background-color: yellow;
}
//  設(shè)置idName元素寬200px,高200px，背景顏色為黃色。

群組選擇器(Group Selectors )：多種選擇器組合成一組，控制同一種樣式，選擇器間用“，”隔開。（當(dāng)要設(shè)置多個(gè)元素?fù)碛型N樣式時(shí)，采用群組選擇器更加便捷，而且可以減少CSS代碼。）
例如：

P,.className,#idName{
font-size: 1.25em;
                  color: yellow;
background-color: red;
}
//  設(shè)置p標(biāo)簽，className類，idName相應(yīng)元素的字體大小為1.25em,字體顏色為紅        色。

子選擇器(Child Selectors )：用兩個(gè)常用選擇器，中間通過“>”進(jìn)行選擇。其中前面的選擇器選擇父元素，后面的選擇器僅選擇父元素第一代孩子中全部對應(yīng)的元素。
例如：




測試子選擇器
第一個(gè)span標(biāo)簽
第二個(gè)span標(biāo)簽

//  父元素box中的第一代孩子中的span元素字體將被設(shè)置為紅色，而包含在p標(biāo)簽 
中的span元素（box元素的第二代孩子）則沒有被影響。

拓展：
:first-child 匹配包含在其父元素中，每個(gè)作為首孩子出現(xiàn)的元素。（不限元素類型）
:last-child 匹配包含在其父元素中，每個(gè)作為最后孩子出現(xiàn)的元素。
:only-child 匹配包含其父元素中，每個(gè)作為唯一孩子出現(xiàn)的元素。
:nth-child(n) 匹配包含在父元素中，每個(gè)作為第n個(gè)孩子出現(xiàn)的元素。（n?可以是數(shù)字、關(guān)鍵詞或公式）

:first-of-type 匹配包含在其父元素中，每個(gè)作為首孩子出現(xiàn)的特定類型元素。
:last-of-type 匹配包含在其父元素中，每個(gè)作為最后孩子出現(xiàn)的特定類型元素。
:nth-of-type(n) 匹配包含在父元素中，每個(gè)作為第n個(gè)孩子出現(xiàn)的的特定類型元素。（n?可以是數(shù)字、關(guān)鍵詞或公式）

后代選擇器(Descendant Selectors )：用兩個(gè)常用選擇器，中間通過空格隔開。其中前面的選擇器選擇父元素，后面的選擇器選擇父元素全部孩子中全部對應(yīng)的元素。（注意不要和子選擇器選擇對象范圍混淆）
例如：




測試子選擇器
第一個(gè)span標(biāo)簽
第二個(gè)span標(biāo)簽

//  父元素box的后代中的所有span元素的字體都會(huì)被設(shè)置成紅色。

相鄰?fù)x擇器(Adjacent sibling selectors)：用兩個(gè)常用選擇器，中間通過“+”進(jìn)行選擇。作用于與前面選擇器同胞的，且是后面選擇器選擇的第一個(gè)元素。
例如




測試相鄰?fù)x擇器選擇器
第一個(gè)span標(biāo)簽
第二個(gè)span標(biāo)簽
第三個(gè)span標(biāo)簽

//  第二個(gè)span標(biāo)簽和p標(biāo)簽同胞故字體將被設(shè)置為紅色。

偽類選擇器(pseudo-classes Selectors)：有時(shí)候還會(huì)需要用文檔以外的其他條件來實(shí)現(xiàn)元素的樣式，例如鼠標(biāo)懸停時(shí)，目標(biāo)元素的樣式變化等。
例如：



鼠標(biāo)懸停時(shí)，我會(huì)改變顏色喲.
//  鼠標(biāo)懸停在鏈接上時(shí)，字體顏色由默認(rèn)的藍(lán)色變成紅色。

與此相似的偽類有：

:link 設(shè)置元素初始樣式。
:visited 設(shè)置元素被訪問后的樣式。
:hover 設(shè)置鼠標(biāo)懸停時(shí)樣式。
:active 設(shè)置鼠標(biāo)點(diǎn)擊瞬間的樣式。

// 在CSS 定義中，a:hover 必須被置于 a:link 和 a:visited 之后，a:active 必須被
置于 a:hover 之后，才是有效的。若要同時(shí)設(shè)置這四種，一般設(shè)置順序?yàn)長VHA。
// 該種偽類一般被應(yīng)用在鏈接上，也可以應(yīng)用在其他元素上，例如表單元素中。

拓展：
:first-line 設(shè)置段落的首行樣式。
:first-letter 設(shè)置段落的首字母樣式。（若為英文則作用于第一個(gè)字母，若為中文則作用于第一個(gè)漢字）

屬性選擇器(Attribute Selectors )：通過判斷元素中是否存在html中某個(gè)屬性或者符合某個(gè)屬性值來選擇作用該元素。
例如一：



我是含有title標(biāo)簽的p標(biāo)簽，我將變紅色。
我是不含title標(biāo)簽的p標(biāo)簽。
//  選擇將含有title屬性的p標(biāo)簽元素字體設(shè)置成紅色。

例如二：


    
我是含有title標(biāo)簽且值為tag1的p標(biāo)簽。
我是含有title標(biāo)簽且值為tag2的p標(biāo)簽，我將變紅色。
//  選擇設(shè)置含有title屬性，且title屬性值為tag2的p標(biāo)簽元素字體為紅色。

通配選擇器：通用選擇器用*來表示,選擇作用于所有元素。
例如：

*{
 color:red;
}
//  所有的元素的字體顏色都將被設(shè)置成紅色。

三、樣式繼承
樣式繼承：某元素設(shè)置了樣式，則其后代可以繼承其某些樣式設(shè)置。
例如：




    樣式繼承
樣式繼承

//  在父元素div中設(shè)置了字體大小20px，字體顏色黃色,邊框黑色，1px，實(shí)線 ，其后代將繼承了它的字體樣式，但沒有繼承它的邊框樣式。
//  注意：父元素的某些樣式設(shè)置時(shí)不會(huì)被子元素繼承，例如margin（外邊距），border（邊框）等等。

四、選擇器級(jí)聯(lián)
級(jí)聯(lián)：是屬性設(shè)置發(fā)生沖突時(shí)，瀏覽器用來確定元素會(huì)應(yīng)用那種樣式的一套規(guī)則。

屬性發(fā)生沖突的兩種情況：

第一種：某元素的多個(gè)祖先設(shè)置了同個(gè)屬性的值。
第二種：同時(shí)兩個(gè)或者兩個(gè)以上的樣式設(shè)置了同一個(gè)屬性。

樣式應(yīng)用規(guī)則：
注意：某些樣式重置后，瀏覽器仍會(huì)保留某些初始屬性設(shè)置。
例如：




h1標(biāo)簽
h2標(biāo)簽
h3標(biāo)簽

//設(shè)置了一樣的字體大小后，瀏覽器仍會(huì)保持h標(biāo)簽初始大小等級(jí)。

1、當(dāng)元素的多個(gè)祖先同時(shí)設(shè)置了同個(gè)屬性，則元素應(yīng)用離它最近的祖先設(shè)置的樣式。
例如：





樣式繼承


//  p標(biāo)簽元素的祖先同時(shí)設(shè)置了字體顏色，最終p標(biāo)簽元素最終繼承了離它最近的father類設(shè)置的樣式，字體為紅色。

2、元素應(yīng)用本身直接設(shè)置的樣式。
例如：





樣式繼承


//  p標(biāo)簽元素最終使用本身設(shè)置的字體顏色，藍(lán)色。

3、應(yīng)用選擇器權(quán)重高者的樣式。

權(quán)重比例如下：
一個(gè)標(biāo)簽選擇器=1個(gè)權(quán)重
一個(gè)類選擇器=10個(gè)權(quán)重
一個(gè)ID選擇器=100個(gè)權(quán)重
例如：

idName p 權(quán)重=100+1=101 idName .className p 權(quán)重=100+10+1=111

// 注意：偽元素相當(dāng)于1個(gè)權(quán)重，例如：:first-line；偽類相當(dāng)于10個(gè)權(quán)重，例如：:hover。
例如：




樣式設(shè)置

//  ID選擇器權(quán)重高，p標(biāo)簽元素字體為黃色

4、后設(shè)置的樣式會(huì)覆蓋先設(shè)置的樣式。
例如：




//  最終背景顏色為后設(shè)置的黃色。

5、！Important可以推翻樣式。
例如：

!important

// 字體顏色最終為紅色。

五、控制樣式應(yīng)用的方法
第一種：采用!important。
注意：由于!important的權(quán)力很大，推翻同屬性的其他樣式設(shè)置，經(jīng)常使用將導(dǎo)致你的樣式不遵從級(jí)聯(lián)規(guī)則。

第二種：改變樣式的選擇器權(quán)重。
注意：僅僅采用簡單的加大權(quán)重，容易導(dǎo)致選擇器名稱過長。
例如：





增加權(quán)重


//  通過增加一個(gè)id選擇器來增加權(quán)重，使字體樣式變黃色而不是紅色。

第三種：微調(diào)樣式出現(xiàn)順序。
注意：一般先引用外部樣式，再寫內(nèi)部樣式。
例如：

css.css文件中的樣式是：
p{
    color:blue;
    }
Html中部分代碼：




我會(huì)聽內(nèi)部樣式的。

//  最終文字為紅色。

又如：





我會(huì)聽外部樣式的。
//  最終文字為藍(lán)色的。

樣式內(nèi)容簡介：
HTML呈現(xiàn)網(wǎng)頁的基本內(nèi)容，CSS呈現(xiàn)網(wǎng)頁的外觀。
CSS樣式有外部樣式和內(nèi)部樣式。CSS樣式一般包含了兩部分，一部分是選擇器（告訴瀏覽器該樣式的作用對象），一部分是聲明塊。聲明語句包括了屬性和屬性值。
外部樣式：
好處：
1、利于更快的開發(fā)（樣式代碼可以復(fù)用）和修改網(wǎng)頁。
2、使用戶更快打開網(wǎng)頁。（外部樣式會(huì)緩存在用戶的計(jì)算機(jī)上，用戶再打開相同外部樣式的網(wǎng)頁則不需要重新加載外部樣式。）
壞處：
網(wǎng)頁開發(fā)時(shí)，有時(shí)重新修改了外部樣式，但之前緩存了外部樣式，瀏覽器一般不再重新加載外部樣式，導(dǎo)致與預(yù)期效果不同。
內(nèi)部樣式：只應(yīng)用于當(dāng)前網(wǎng)頁，不便于開發(fā)和對于整個(gè)網(wǎng)站的修改。