CSS常用的選取器和優先順序的權重問題

來源:互聯網
上載者:User

標籤:作用   one   bsp   並集   英文單詞   使用   選擇   class   組合   

CSS注釋

CSS修改頁面中的所有標籤,必須藉助選取器選中。
選取器中,可以寫多對CSS屬性,用{}包裹;
每個屬性名稱與屬性值之間用:分隔,多對屬性之間,必須用;來分隔

選取器{
 屬性1:屬性值1;
 屬性2:屬性值2;

【選取器的命名規範】

1、只能有字母、數字、底線、減號組成。
2、開頭不能是數字,也不能是只有一個減號。
一般,起名要求有語義,使用英文單詞與數位組合。



1、標籤選取器

寫法:HTML標籤名{}
作用:可以選中頁面中,所有與選取器同名的HTML標籤。

例如:

li{
  color:red;
  font-size: 48px;
}

 

2、類別選取器(class選取器)

寫法:.class名{}
調用:在需要調用選取器樣式的標籤上,使用class=“class名”調用選取器
優先順序:class選取器>標籤選取器

例如:

.first{
  color: blue;
}

3、ID選取器

寫法:#ID名{}
調用:需要調用樣式的標籤,起一個id=“ID名”
優先順序:ID選取器>class選取器
注意:一個頁面中,不能出現同名ID

例如:
#one{
  background-color: yellow;
}

 

         【class選取器和ID選取器的區別】
       1、寫法不同:class選取器用.聲明,ID選取器用#聲明;
       2、優先順序不同:ID選取器>class選取器;
       3、作用範圍不同:class選取器可以多次調用,ID選取器只能使用一次。

 

4、通用選取器
寫法:*{}
作用:可以選中頁面中所有的HTML標籤。
優先順序:最低!!
例如:
*{
  color: orange;
}

5、並集選取器
寫法:選取器1,選取器2,.....,選取器n{}
生效規則:多個選取器取並集,只要標籤滿足其中任意一個選取器,樣式即可生效。
例如:
li,.first{
  color: red;
}

6、交集選取器
寫法:選取器1選取器2......選取器n{} 所有選取器緊挨著,沒有分隔
生效規則:多個選取器取交集,則必須滿足所有選取器的要求,才會生效
例如:
li.first{
  color:red;
}

7、後代選取器
寫法:選取器1選取器2......選取器n{} 選取器之間空格分隔
生效規則:只要滿足,後一選取器是前一個選取器的後代,即可生效。(後代包括子代、
孫代、重孫代 。。。)
例如:
div span{
  color:orange
}

8、子代選取器
寫法:選取器1>選取器2>......>選取器n{} 選取器之間用>分隔
生效規則:必須滿足,後一個選取器是前一個選取器的直接子代,才會生效。(
 中間不能間隔任何標籤)
例如:
div>span{ 
  color: orangered;
}

 

【優先順序的權重問題】
1、css生效的第一原則是“近者優先”!即,哪個選取器作用於最裡層標籤,則這個選取器生效;

2、當選取器作用於同一層時,可以根據優先順序權重,進行累加計算:
 ID選取器為100 > class選取器為10 > 標籤選取器為1
 注意:並集選取器,相當於多個選取器拆開寫,所以,並集選取器的優先順序不能累加。

3、當選取器作用於同一層,且優先順序權重相等時。則,寫在最後的選取器生效。

CSS常用的選取器和優先順序的權重問題

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.