1. 程式人生 > >CSS選擇器和CSS權重

CSS選擇器和CSS權重

一 、CSS作用

CSS 層疊樣式表(英文全稱:Cascading Style Sheets)是一種用來表現HTML(標準通用標記語言的一個應用)或XML(標準通用標記語言的一個子集)等檔案樣式的計算機語言。

它主要用來修飾網頁。對網頁中元素位置的排版進行畫素級精確控制,同時支援幾乎所有的字型字號樣式,擁有對網頁物件和模型樣式編輯的能力。
使用HTML和CSS,就可以寫出靜態的網頁了。

二、CSS選擇器

要想編輯一個網頁,首先需要選中被編輯的物件,這就要使用CSS選擇器。

1.類別選擇器

類選擇器根據類名來選擇,前面以”.”來標誌。如:.wrap


這的類名在HTML中class屬性定義。

2.標籤選擇器

一個HTML頁面是有很多不同的標籤組成,而標籤選擇器,則是決定哪些標籤
採用相應的CSS樣式。如:div

3.ID選擇器

ID 選擇器可以為標有特定 ID 的 HTML 元素指定特定的樣式。 根據元素ID來選擇元素,具有唯一性,這意味著同一id在同一文件頁面中只能出現一次,這樣就可以選定某個特定的元素進行編輯。如:#name

4.後代選擇器

後代選擇器也稱為包含選擇器,用來選擇特定元素或元素組的後代,將父元素的選擇放在前面,對需要選擇的後代元素的選擇放在後面,中間加一個空格分開(可逐級選擇,也可跳級選擇)。結合之前的類選擇、標籤選擇、ID選擇,一層一層的選中特定的元素。
注意:後代選擇器選擇的不一定是子元素,只要是父元素下滿足條件的元素都會被選擇上。

5.子選擇器

子選擇器僅是指它的直接後代,或者你可以理解為作用於子元素的第一個後代。通過“>”進行選擇。必須一層一層選擇到需要的地方。

6.偽類選擇器

有時候還會需要用文件以外的其他條件來應用元素的樣式,比如滑鼠懸停等。這時候我們就需要用到偽類了。以下是連結應用的偽類定義。

偽類選擇器 效果
hover 匹配滑鼠懸停其上的元素
visited 匹配所有已被點選的連結
link 匹配所有未被點選的連結
active 匹配滑鼠已經在其上按下 但是還沒有釋放的元素

當觸發偽類元素時,偽類元素只能修改自已,或自已的子級元素。不能修改子級的父級,或兄弟元素。

7.通用選擇器

通用選擇器用*來表示。選擇HTML中所有的部分。
一般用於初始化設定。

8.群組選擇器

當幾個元素樣式屬性一樣時,可以共同呼叫一個宣告,元素之間用逗號分隔。

三、CSS權重

一個元素可以通過不同的方式被選擇。但這些選擇出現衝突該如何處理?
通過不同的方法選擇一個元素會有不同的權重,如果權重大,就依照權重大的。如果權重一樣大,就選擇定義在後面的元素定義。

型別 權重
! important 無窮
行間樣式 1000
id 100
class/屬性選擇器/偽類 10
標籤選擇器 1
萬用字元 0

使用後代選擇器時,每一級不同的表述方式,直接進行相加,最後進行權重的比較。
ps:CSS的選擇器進位制是256進位制。