CSS選擇器/CSS的繼承、層疊和特殊性

原創 Code_浅蓝 2020-02-22 08:09

什麼是選擇器？

每一條css樣式聲明（定義）由兩部分組成，形式如下：

選擇器{
    樣式;
}

在{}之前的部分就是“選擇器”，“選擇器”指明瞭{}中的“樣式”的作用對象，也就是“樣式”作用於網頁中的哪些元素。比如示例代碼編輯器中第7行代碼中的“body”就是選擇器。

示例

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>選擇器</title>
<style type="text/css">
body
{
    font-size:12px;
    color:red;  
}
</style>
</head>
<body>
<p>豐富的移動端開發、php開發、web前端、html5教程以及css3視頻教程等課程資源。</p>
</body>
</html>

標籤選擇器

標籤選擇器其實就是html代碼中的標籤。如右側代碼編輯器中的<html>、<body>、<h1>、<p>、<img>。例如下面代碼：

p{font-size:12px;line-height:1.6em;}

上面的css樣式代碼的作用：爲p標籤設置12px字號，行間距設置1.6em的樣式。

示例

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>認識html標籤</title>
<style type="text/css">
h1{
    font-weight:normal;
    color:red;
}
p{
    font-size:38px;
    color:blue;
}
</style>
</head>
<body>
    <h1>勇氣</h1>
    <p>學校舉辦的活動我勇氣參加。</p>
    <p>班裏很多同學都舉手了。</p>
    <img src="http://img.com/2000200.jpg" >
</body>
</html>

類選擇器

類選擇器在css樣式編碼中是最常用到的，如右側代碼編輯器中的代碼:可以實現爲“膽小如鼠”、“勇氣”字體設置爲紅色。

語法

 .類選器名稱{css樣式代碼;}

注意

1、英文圓點開頭

2、其中類選器名稱可以任意起名（但不要起中文噢）

使用方法

第一步：使用合適的標籤把要修飾的內容標記起來，如下：

<span>膽小如鼠</span>

第二步：使用class=”類選擇器名稱”爲標籤設置一個類，如下：

<span class="stress">膽小如鼠</span>

第三步：設置類選器css樣式，如下：

.stress{color:red;}/*類前面要加入一個英文圓點*/

示例

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>認識html標籤</title>
<style type="text/css">
.stress{
    color:red;
}
.setGreen{
    color:green;
}
</style>
</head>
<body>
    <h1>勇氣</h1>
    <p>我是一個<span class="stress">膽小如鼠</span>的小女孩。就沒有<span class="stress">勇氣</span>來回答老師問題。</p>
    <p>我們班上了一節<span class="setGreen">公開課</span>，老師提出了一個很簡單的問題，就我沒有舉手。</p>
    <img src="http://img.com/2000200.jpg" >
</body>
</html>

ID選擇器

在很多方面，ID選擇器都類似於類選擇符，但也有一些重要的區別：

1、爲標籤設置id=”ID名稱”，而不是class=”類名稱”。

2、ID選擇符的前面是井號（#）號，而不是英文圓點（.）。

示例代碼編輯器中就是一個ID選擇符的完整實例。

示例

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>認識html標籤</title>
<style type="text/css">
    #stress{
        color:red;
    }
    #setGreen{
        color:green;
    }
</style>
</head>
<body>
    <h1>勇氣</h1>
    <p><span id="stress">膽小如鼠</span> &nbsp;勇氣</p>
    <p><span id="setGreen">公開課</span> &nbsp;舉手</p>
</body>
</html>

類和ID選擇器的區別

學習了類選擇器和ID選擇器，我們會發現他們之間有很多的相似處，是不是兩者可以通用呢？我們不要着急先來總結一下他們的相同點和不同點：

相同點：可以應用於任何元素
不同點：

1、ID選擇器只能在文檔中使用一次。與類選擇器不同，在一個HTML文檔中，ID選擇器只能使用一次，而且僅一次。而類選擇器可以使用多次。

下面代碼是正確的：

<p>
<span class="stress">膽小如鼠</span>
<span class="stress">勇氣</span>
</p>

而下面代碼是錯誤的：

 <p>
 <span id="stress">膽小如鼠</span>
 <span id="stress">勇氣</span>
 </p>

2、可以使用類選擇器詞列表方法爲一個元素同時設置多個樣式。我們可以爲一個元素同時設多個樣式，但只可以用類選擇器的方法實現，ID選擇器是不可以的（不能使用 ID 詞列表）。

下面的代碼是正確的(完整代碼見示例)

.stress{
    color:red;
}
.bigsize{
    font-size:25px;
}
<p>
<span class="stress bigsize">三年級</span>
</p>

上面代碼的作用是爲“三年級”三個文字設置文本顏色爲紅色並且字號爲25px。

下面的代碼是不正確的(完整代碼見示例)

#stressid{
    color:red;
}
#bigsizeid{
    font-size:25px;
}
<p>
<span id="stressid bigsizeid">三年級</span>
</p>

上面代碼不可以實現爲“三年級”三個文字設置文本顏色爲紅色並且字號爲25px的作用。

示例

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>類和ID選擇器的區別</title>
<style type="text/css">
.stress{
    color:red;
}
.bigsize{
    font-size:25px;
}
#stressid{
    color:red;
}
#bigsizeid{
    font-size:25px;
}
</style>
</head>
<body>
    <h1>勇氣</h1>
    <p>
    <span class="stress">膽小如鼠</span>
    <span class="stress">勇氣</span>
    </p>
    <p><span class="stress bigsize">三年級</span></p>
    <p><span id="stressid bigsizeid">三年級</span>
    </p>
</body>
</html>

子選擇器

還有一個比較有用的選擇器子選擇器，即大於符號(>),用於選擇指定標籤元素的第一代子元素。如示例代碼中的代碼：

.food>li{border:1px solid red;}

這行代碼會使class名爲food下的子元素li（水果、蔬菜）加入紅色實線邊框。

示例

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>子選擇符</title>
<style type="text/css">
.food>li{border:1px solid red;}/*添加邊框樣式（粗細爲1px， 顏色爲紅色的實線）*/
.first>span{border:1px solid red;}
.list{border:1px solid red;}
</style>
</head>
<body>javascript:;
<p class="first">啦啦啦0<span>啦啦啦1<span>啦啦啦2</span>啦啦啦3孩</span></p>
<h1>食物</h1>
<ul class="food">
    <li>水果
        <ul>
            <li>香蕉</li>
            <li>蘋果</li>
            <li>梨</li>
        </ul>
    </li>
    <li>蔬菜
        <ul>
            <li  class="list">白菜</li>
            <li>油菜</li>
            <li>捲心菜</li>
        </ul>
    </li>
</ul>
</body>
</html>

包含(後代)選擇器

包含選擇器，即加入 空格 , 用於選擇指定標籤元素下的 後輩元素 。如示例代碼：

.first  span{color:red;}

這行代碼會使第一段文字內容中的“膽小如鼠”字體顏色變爲紅色。

請注意這個選擇器與子選擇器的區別，子選擇器（child selector）僅是指它的直接後代，或者你可以理解爲作用於子元素的第一代後代。而後代選擇器是作用於所有子後代元素。後代選擇器通過空格來進行選擇，而子選擇器是通過“>”進行選擇。

總結：>作用於元素的第一代後代，空格作用於元素的所有後代。

示例

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>後代選擇器</title>
<style type="text/css">
.first span{color:red;}

.food li{
    border:1px solid red;/*添加邊框樣式（粗細爲1px， 顏色爲紅色的實線）*/   
}
</style>
</head>
<body>
    <p class="first">
     <span>膽小如鼠
     </span>
    </p>
<!--下面是本小節任務代碼-->
<ul class="food">
    <li>水果
        <ul>
            <li>香蕉</li>
            <li>蘋果</li>
            <li>梨</li>
        </ul>
    </li>
    <li>蔬菜
        <ul>
            <li>白菜</li>
            <li>油菜</li>
            <li>捲心菜</li>
        </ul>
    </li>
</ul>
</body>
</html>

通用選擇器

通用選擇器是功能最強大的選擇器，它使用一個（*）號指定，它的作用是匹配html中 所有 標籤元素，如下使用下面代碼使用html中任意標籤元素字體顏色全部設置爲紅色：

* {color:red;}

示例

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>* 選擇符</title>
<style type="text/css">
* {color:red; font-size:20px;}
</style>
</head>
<body>
    <h1>勇氣</h1>
    <p>三年級</p>
    <p>公開課</p>
    <img src="http://img.com/2000200.jpg" >
</body>
</html>

僞類選擇器

更有趣的是僞類選擇符，爲什麼叫做僞類選擇符，它允許給html不存在的標籤（標籤的某種狀態）設置樣式，比如說我們給html中一個標籤元素的 鼠標滑過的狀態 來設置字體顏色：

a:hover{color:red;}

上面一行代碼就是爲 a 標籤鼠標滑過的狀態設置字體顏色變紅。這樣就會使第一段文字內容中的“膽小如鼠”文字加入鼠標滑過字體顏色變爲紅色特效。

關於僞選擇符：

       關於僞類選擇符，到目前爲止，可以兼容所有瀏鑑器的“僞類選擇符”就是 a 標籤上使用 :hover 了（其實僞類選擇符還有很多，尤其是 css3 中，但是因爲不能兼容所有瀏覽器，本教程只是講了這一種最常用的）。其實 :hover 可以放在任意的標籤上，比如說 p:hover，但是它們的兼容性也是很不好的，所以現在比較常用的還是 a:hover 的組合。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>僞類選擇符</title>
<style type="text/css">
a:hover{
    color:red;
    font-size:20px;
}
</style>
</head>
<body>
    <h1>勇氣</h1>
    <p class="first">加油<a href="http://www.imooc.com">膽小如鼠</a></p>
    <p id="second">容易<span>簡單</span>挑戰</p>
    <img src="http://img.com/2000200.jpg" >
</body>
</html>

分組選擇符

當你想爲html中多個標籤元素設置同一個樣式時，可以使用分組選擇符（，），如下代碼爲右側代碼編輯器中的h1、span標籤同時設置字體顏色爲紅色：

h1,span{color:red;}

它相當於下面兩行代碼：

h1{color:red;}
span{color:red;}

示例

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>分組選擇符</title>
<style type="text/css">
/*h1,span{color:green;}*/
.first,#second span{color:green;}
</style>
</head>
<body>
    <h1>勇氣</h1>
    <p class="first">三年級<span>膽小如鼠</span>問題</p>
    <p id="second">學期<span>簡單</span>問題</p>
    <img src="http://img.com/2000200.jpg" >
</body>
</html>

繼承

CSS的 某些樣式 是具有繼承性的，那麼什麼是繼承呢？繼承是一種規則，它允許樣式不僅應用於某個特定html標籤元素，而且應用於其後代。比如下列代碼：如某種顏色應用於p標籤，這個顏色設置不僅應用p標籤，還應用於p標籤中的所有子元素文本，這裏子元素爲span標籤。

p{color:red;}
<p>iOS<span>Objective-C</span>Swift</p>

可見結果p中的文本與span中的文本都設置爲了紅色。但注意有一些CSS樣式是不具有繼承性的。如border:1px solid red;

p{border:1px solid red;}
<p>iOS<span>Objective-C</span>Swift</p>

在上面例子中它代碼的作用只是給p標籤設置了邊框爲1像素、紅色、實心邊框線，而對於子元素span是沒用起到作用的。

示例

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>繼承</title>
<style type="text/css">
p{color:red;}
p{border:1px solid red;}
</style>
</head>
<body>
    <h1>勇氣</h1>
    <p class="first">iOS<span>Objective-C</span>Swift</p>
    <p id="second">iOS<span>Objective-C</span>Swift</p>
</body>
</html>

編譯結果

特殊性

有的時候我們爲同一個元素設置了不同的CSS樣式代碼，那麼元素會啓用哪一個CSS樣式呢?我們來看一下面的代碼：

p{color:red;}
.first{color:green;}
<p class="first"> iOS <span> Objective-C </span> Swift </p>

p和.first都匹配到了p這個標籤上，那麼會顯示哪種顏色呢？green是正確的顏色，那麼爲什麼呢？是因爲瀏覽器是根據權值來判斷使用哪種css樣式的，權值高的就使用哪種css樣式。

下面是權值的規則：

標籤的權值爲1，類選擇符的權值爲10，ID選擇符的權值最高爲100。例如下面的代碼：

p{color:red;} /*權值爲1*/
p span{color:green;} /*權值爲1+1=2*/
.warning{color:white;} /*權值爲10*/
p span.warning{color:purple;} /*權值爲1+1+10=12*/
#footer .note p{color:yellow;} /*權值爲100+10+1=111*/

注意：還有一個權值比較特殊–繼承也有權值但很低，有的文獻提出它只有0.1，所以可以理解爲繼承的權值最低。

示例

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>特殊性</title>
<style type="text/css">
p{color:red;} /*權值爲1*/
.first{color:green;}/*因爲權值高顯示爲綠色 權值爲10*/
span{color:pink;}/*設置爲粉色 權值爲1*/
p span{color:purple;}/*後代選擇 權值爲2*/
/*p>span{color:purple;}子選擇器 權值爲2*/
</style>
</head>
<body>
    <h1>勇氣</h1>
    <p class="first">iOS 10<span> Objective-C</span> Swift </p>
    <p id="second"> "iOS Developer" </p>
</body>
</html>

這裏寫圖片描述

疊層

我們來思考一個問題：如果在html文件中對於同一個元素可以有多個CSS樣式存在並且在這對個CSS樣式具有 相同權重值 怎麼辦? 使用疊層可以幫你解決這個問題。

疊層 就是在html文件中對於同一個元素可以有多個css樣式存在，當相同權重的樣式存在時，會根據這些css樣式的前後順序來決定，處於最後面的css樣式會被應用。

如下代碼:

p{color:red;}
p{color:green;}
<p class="first"> OC <span> swift </span> iOS </p>

最後 p 中的文本會設置green， 這個疊層很好理解，理解爲後面的樣式會覆蓋前面的樣式。

所以前面的CSS樣式優先級就不難理解了:

內聯樣式表（標籤內部）> 嵌入樣式表（當前文件中）> 外部樣式表（外部文件中）。

重要性

我們在做網頁代碼的時候，有些特殊的情況需要爲某些樣式設置具有最高權值，怎麼辦? 這時候我們可以使用！important 來解決。

如下代碼:

p{color:red!important;}
p{color:green;}
<p class="first"> iOS <span> OC </span> Swift </p>

注意：!important要寫在分號的前面

這裏注意當網頁製作者不設置css樣式時，瀏覽器會按照自己的一套樣式來顯示網頁。並且用戶也可以在瀏覽器中設置自己習慣的樣式，比如有的用戶習慣把字號設置爲大一些，使其查看網頁的文本更加清楚。這時注意樣式優先級爲：瀏覽器默認的樣式 < 網頁製作者樣式 < 用戶自己設置的樣式，但記住!important優先級樣式是個例外，權值高於用戶自己設置的樣式。

<style type="text/css">
p{color:red!important;}
p.first{color:green;}
</style>
Code_淺藍
發佈了40 篇原創文章 · 獲贊 20 · 訪問量 2萬+
私信 關注
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

CSS 元素分類 / 盒模型基礎 / 深入理解

元素分類 在講解CSS佈局之前，我們需要提前知道一些知識，在CSS中，html中的標籤元素大體被分爲三種不同的類型：塊狀元素、內聯元素(又叫行內元素)和內聯塊狀元素。 常用的塊狀元素有： <div>、<p>、<h1>...<h6

Code_浅蓝 2020-06-13 18:48:18

HTML之認識標籤(一)

2-1. 語義化, 讓你的網頁更好的被搜索引擎理解 標籤的用途:  我們學習網頁製作時, 常常會聽到一個詞,語義化。那麼什麼叫做語義化呢，說的通俗點就是: 明白每個標籤的用途(在什麼情況下使用此標籤合理) 比如, 網頁上的文字的標題就可

Code_浅蓝 2020-06-13 18:48:18

CSS代碼縮寫, 佔用更少的寬帶，單位和值

盒模型代碼簡寫 還記得在講盒模型時外邊距(margin)、內邊距(padding)和邊框(border)設置上下左右四個方向的邊距是按照順時針方向設置的：上右下左。具體應用在margin和padding的例子如下： margin

Code_浅蓝 2020-06-13 18:48:18

HTML之認識標籤(三)

Code_浅蓝 2020-02-22 08:09:55

CSS樣式基本知識，添加樣式,

Code_浅蓝 2020-02-22 08:09:55

CSS佈局模型/網頁佈局基礎

Code_浅蓝 2020-02-22 08:09:55

HTML之與瀏覽器交互, 表單標籤

Code_浅蓝 2020-02-22 08:09:55

HTML之認識標籤(二)

Code_浅蓝 2020-02-22 08:09:55

HTML之標籤基礎彙總

Code_浅蓝 2018-09-03 21:53:48

CSS文字屬性與選擇器

Code_浅蓝 2018-09-03 21:53:48