第二章 選擇器

1、基本規(guī)則

CSS的主要功能就是將某些規(guī)則應(yīng)用于文檔中同一類型的元素,而不需要去DOM中逐個加入內(nèi)聯(lián)樣式。

2、規(guī)則結(jié)構(gòu)

h1 {
    color: red;
}

h1:選擇符
{ color: red; }:聲明
color:屬性
red:值

3、聲明

如果有一個不正確的屬性被用于聲明中,那么,整條聲明將被忽略,因為即使值是正確的,屬性也不正確。

如果某個值不正確,多數(shù)情況下只有那個值被忽略。

4、類和ID有什么區(qū)別?

(1) 首先,類可以分配給任何數(shù)量的元素,ID卻只能在某個HTML文檔中使用一次。
(2) ID對給定元素應(yīng)用何種樣式比類具有更高的優(yōu)先權(quán)。

5、偽類和偽元素

(1)、偽類:
a:link { color: #FF0000; }  //未訪問的鏈接
a:visited { color: #00FF00; }  //已訪問的鏈接
a:hover { color: #FF00FF; }  //鼠標(biāo)移動到鏈接上
a:active { color: #0000FF; }  //選定的鏈接
(2)、偽元素

CSS1中有兩個偽元素::first-letter 和 :first-line

應(yīng)用于段落這樣的塊級元素中,首字母和首行。

之所以 :first-letter 和 :first-line 被當(dāng)做偽元素引用,是因為它們在效果上使文檔中產(chǎn)生了一個臨時元素,這就是應(yīng)用"虛構(gòu)標(biāo)記"的一個最典型的實例。

從理論上講,偽元素 :first-line 是如何工作的?

例如:

p:first-line { color: gray; }

<p>This is a paragraph of text which has only one style applied to it.
 that style causes the first line to be gray</p>

瀏覽器會解析并生成下面的虛擬標(biāo)記:

<p><p:first-line> This is a paragraph of text which has only </p:first-line> 
one style applied to it. that style causes the first line to be gray</p>

展示后,這些虛擬標(biāo)記會被刪除。

6、結(jié)構(gòu)

7、繼承

將文檔視為一棵樹是很重要的,其中一個原因就是:CSS的一個主要特征就是繼承,它是依賴于祖先-后代關(guān)系的。繼承其實是一種機(jī)制,它允許樣式不僅應(yīng)用于某個特定的元素,而且應(yīng)用于其后代。

被繼承的值具有特殊性 0。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1. 聲明和關(guān)鍵字: 一條聲明中,屬性值含有多個關(guān)鍵字時用空格隔開:border: solid 1px red; ...
    VirtualX閱讀 822評論 0 0
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,506評論 19 139
  • 1.CSS 元素選擇器 最常見的 CSS 選擇器是元素選擇器。換句話說,文檔的元素就是最基本的選擇器。如果設(shè)置 H...
    饑人谷_小侯閱讀 943評論 0 1
  • 其實平時用得多的選擇器無非也就是那么幾個,時間久了,許多不常用的選擇器就慢慢忘記了。為了不讓自己忘記這些選擇器,今...
    盛夏晚清風(fēng)閱讀 1,945評論 0 5
  • 1. Java基礎(chǔ)部分 基礎(chǔ)部分的順序:基本語法,類相關(guān)的語法,內(nèi)部類的語法,繼承相關(guān)的語法,異常的語法,線程的語...
    子非魚_t_閱讀 34,625評論 18 399

友情鏈接更多精彩內(nèi)容