css 工作原理
每個(gè)html元素都有一組樣式屬性贱呐，可以通過css來設(shè)定。當(dāng)html元素的同一個(gè)樣式屬性有多種樣式值的時(shí)候，css就要靠層疊機(jī)智來決定最終應(yīng)用哪種樣式怯晕。
HUGOMORE42
css規(guī)則
規(guī)則實(shí)際上是一條完整的css指令，規(guī)則聲明了要修改的元素和要應(yīng)用給改元素的樣式缸棵。
為文檔添加樣式的三種方法：
寫在元素標(biāo)簽里（也叫行內(nèi)樣式舟茶，只能影響它所在的標(biāo)簽，會覆蓋嵌入樣式和鏈接樣式）
寫在 <style>
標(biāo)簽里（也就嵌入樣式堵第，應(yīng)用范圍僅限于當(dāng)前頁面吧凉，頁面樣式會覆蓋外部樣式表中的樣式，但會被行內(nèi)樣式覆蓋）
寫在單獨(dú)css樣式表中（也叫鏈接樣式踏志，樣式表是一個(gè)擴(kuò)展名為.css 的文件阀捅，可以在任意多個(gè)HTML頁面鏈接同一個(gè)樣式表文件。鏈接樣式的作用范圍是整個(gè)網(wǎng)站）
除了這三種為頁面添加樣式的方法针余，還有一種在樣式表中鏈接其他樣式表的方法饲鄙，使用@import 指令：例如
@import url(css/styles.css)
@import 指令必須出現(xiàn)在樣式表中其他樣式之前，否則@吹滅圆雁；@import引用的樣式表不會被加載忍级。
css 規(guī)則命名慣例
對這個(gè)基本的結(jié)構(gòu)有三種方法可以進(jìn)行擴(kuò)展
第一種方法：多個(gè)聲明包含在一條規(guī)則里。
p {color: red; font-size: 12px; font-weight: bold;}
第二種方法：多個(gè)選擇器組合在一起伪朽。例如：如果想讓< h1 >轴咱、< h2 >和 < h3 >
的文本都變成藍(lán)色粗體可以這么寫:
h1 {color: blue; font-weight: bold;}
h2 {color: blue; font-weight: bold;}
h3 {color: blue; font-weight: bold;}
也可以這么寫：
h1, h2, h3 {color: blue; font-weight: bold;}
分組選擇符以逗號作為分隔符
第三種方法： 多條規(guī)則應(yīng)用給一個(gè)選擇符。例如烈涮，寫完上邊的規(guī)則朴肺，還想把h3變成斜體，那么可以再為h3單獨(dú)寫一條規(guī)則：
h1, h2, h3 {color: blue; font-weight: bold;}h3 {font-style: italic;}
選擇特定元素的選擇符
用于選擇特定元素的操作符有三種
上下文選擇符坚洽「旮澹基于祖先或者同胞元素選擇一個(gè)元素。
ID和類選擇符酪术∑鞅瘢基于id和class屬性的值選擇元素翠储。
屬性選擇符∠鹛郏基于屬性的有無和特征選擇元素援所。
上下文選擇符
比如我們想給article中的段落設(shè)置不同的字號，可以使用上下文選擇符來解決欣除。
上下文選擇符的格式如下：
標(biāo)簽1 標(biāo)簽2 {聲明}
其中標(biāo)簽2 是我們要選擇的目標(biāo)住拭，而且只有在 標(biāo)簽1是其祖先元素的情況下才會被選中。
上下文選擇符历帚，叫后代組合式選擇符滔岳，就是一組以空格分隔的標(biāo)簽名。用于選擇作為特定祖先元素后代的標(biāo)簽挽牢。
article p {font-weight: bold;}
上邊例子中谱煤，只有article后代的p元素才會應(yīng)用后邊的樣式。
上下文選擇符以空格作為分隔符
特殊的上下文選擇符
子選擇符 >
格式如下：
標(biāo)簽1 > 標(biāo)簽2
標(biāo)簽1 必須是 標(biāo)簽2 的父元素禽拔，不能是其它的祖先元素刘离。
section > h2 {font-style: italic;}
緊鄰?fù)x擇符+
格式如下：
標(biāo)簽1 + 標(biāo)簽2
標(biāo)簽2 必須緊跟在期同胞標(biāo)簽1后面。
h2 + p {font-variant: small-caps;}
標(biāo)簽 h2 和 p 為同一級標(biāo)簽睹栖，且標(biāo)簽p和 h2 相鄰硫惕。(只應(yīng)用到p標(biāo)簽）
一般同胞選擇符 ~
格式如下：
標(biāo)簽1 ~ 標(biāo)簽2
標(biāo)簽2 必須跟在其 同胞標(biāo)簽1 后面（可以不相鄰）。
h2 ~ a {color: red;}
標(biāo)簽a 和 標(biāo)簽h2 同一級野来，且a標(biāo)簽在h2 標(biāo)簽之后恼除。（只應(yīng)用與a標(biāo)簽）
通用選擇符 *
通用選擇符 * 是一個(gè)通配符，它匹配任何元素曼氛。
- {color: green;}
這條規(guī)則會將所有元素（文本和邊框）都變成綠色豁辉。
p * {color: red;}
這條規(guī)則會把p包含的所有元素的文本都變成紅色。
section * a {font-size: 1.3em;}
所有section標(biāo)簽的 非子標(biāo)簽（*是所有的子標(biāo)簽）的a標(biāo)簽字體設(shè)置為 1.3 em;
ID和類選擇符
使用ID和類選擇符搪锣，首先要在HTML標(biāo)記中為元素添加id和class屬性秋忙。
可以給id和class屬性設(shè)定任意值，但不能以數(shù)字或特殊符號開頭
類屬性
給標(biāo)簽h1添加 specialtext 類构舟。
<h1 class="specialtext">This is text</h1>
類選擇符
格式為：
.類名
類選擇符使用點(diǎn)(.)灰追，緊跟類名。
標(biāo)簽帶類選擇符
格式為：
標(biāo)簽1.類名
比如：
p.specialtext {color: red;}
只對有 specialtext 類的p標(biāo)簽有效狗超。
多類選擇符
可以給元素添加多個(gè)類：
<p class="specialtext featured">Here the span tag <span> may or may not</span> be styled.</p>
多個(gè)類名放在同一對引號吃弹澎，用空格分隔。
要選擇同時(shí)存在這兩個(gè)類名的元素可以這樣寫：
.specialtext.featured {font-size: 120%;}
CSS 選擇符的兩個(gè)類名直接沒有空格努咐。如果加了苦蒿，就變成祖先/后代關(guān)系的上下文選擇符了。
ID屬性
ID屬性與類寫法類似渗稍，用#表示佩迟。
<p id="specialtext">This is text</p>
上邊p標(biāo)簽就設(shè)置了ID屬性specialtext团滥。
相應(yīng)的ID選擇符就這樣寫：
specialtext {css樣式}
選擇元素方式其余和class 一致。
ID屬性和類屬性的區(qū)別
ID可以用于頁面導(dǎo)航鏈接中报强。例如：
<a href="#bio">Biggraphy</a>
用戶點(diǎn)擊這個(gè)鏈接會滾到ID值為bio的位置灸姊。如果href屬性里只有一個(gè)#，那么點(diǎn)擊鏈接會跳到頂部秉溉。
ID值需要時(shí)獨(dú)一無二的力惯。
類的目的是為了標(biāo)識一組具有相同特征的元素，以便我們?yōu)檫@些元素應(yīng)用相同的css樣式召嘶。
屬性選擇符
屬性名選擇符
格式如下：
標(biāo)簽名[屬性名]
選擇任何帶有屬性名的標(biāo)簽名父晶。
比如：
img[title] {border: 2px solid blue;}
這個(gè)規(guī)則會選擇帶有title屬性的HTML img元素，title是什么值都可以弄跌。
屬性值選擇符
格式如下：
標(biāo)簽名[屬性名="屬性值"]（在html5中甲喝，屬性值得引號可不加)
例如：
img[title="red flower"] {border: 2px solid blue;}
這個(gè)規(guī)則會選擇帶有title屬性的HTML img元素，且title值為"red flower"碟绑。
偽類
偽類分兩種：
UI偽類會在HTML元素處于某個(gè)狀態(tài)時(shí)俺猿，為該元素應(yīng)用CSS樣式茎匠。
結(jié)構(gòu)化偽類會在標(biāo)記中存在某種結(jié)構(gòu)上的關(guān)系時(shí)格仲，為相應(yīng)元素應(yīng)用CSS樣式。
偽類使用:(冒號)作為選擇符诵冒。兩個(gè)冒號(::)表示新增的偽元素凯肋。
UI偽類
UI偽類會基于特定的HTML元素的狀態(tài)應(yīng)用樣式。
鏈接偽類
針對鏈接的偽類有4個(gè)：
Link汽馋。 此時(shí)侮东，鏈接為被點(diǎn)擊
Visited。用戶點(diǎn)擊過鏈接之后
Hover豹芯。鼠標(biāo)懸停在鏈接上
Active悄雅。鏈接正在被點(diǎn)擊
使用方式舉例：
a:link {color: black;}
a:visited {color: blue;}
a:hover {text-decoration: none;}
a:active {color: red;}
hover偽類可以應(yīng)用在任何元素。
p:hover {background-color: gray;}
:focus 偽類
可以應(yīng)用于任何元素铁蹈。
點(diǎn)擊時(shí)會或得焦點(diǎn)宽闲。
:target 偽類
可以應(yīng)用于任何元素。如果用戶點(diǎn)擊一個(gè)指向頁面中其他元素的鏈接握牧，則那個(gè)元素就是目標(biāo)容诬，可以用:target 選中。
比如：
<a href="#more_info">More Infomation</a>
應(yīng)用上偽類后沿腰，ID為more_info的元素就是目標(biāo)览徒。點(diǎn)擊a標(biāo)簽時(shí)，會應(yīng)用css樣式颂龙。
css規(guī)則如下：
#more_info:target {background: #eee;}
結(jié)構(gòu)化偽類
:first-child和:last-child
:first-child 代表一組同胞元素的第一個(gè)元素
:last-child 代表一組同胞元素的最后一個(gè)元素
:nth-child
規(guī)則如下：
e:nth-child(n)
e表示元素名习蓬，n表示一個(gè)數(shù)值纽什。
比如：
li:nth-child(3)
會選中一組列表的每個(gè)第三項(xiàng)。
偽元素
偽元素是文檔中若有實(shí)無的元素躲叼。常用的偽類如下：
::first-letter
選擇首字母稿湿，使用規(guī)則：
e::first-letter
比如
p::first-letter {font-size:300%;}
會讓首字母變大。
::first-line
選擇段落的第一行押赊。
e::first-line
::before和::after
使用規(guī)則如下：
e::beforee::after
可用于在特定的元素前面或者后面添加特殊內(nèi)容饺藤。
以上CSS選擇符已經(jīng)介紹完了，接下來討論在一個(gè)大的樣式表中流礁，規(guī)則選擇的問題涕俗。
CSS提供了三種機(jī)制來決定那條規(guī)則會勝出：
繼承
層疊
特指
繼承
CSS屬性的值會向下傳遞。比如我們添加一條這樣的規(guī)則：
body: {font-family: arial;}
那么文檔的所有元素都將繼承這個(gè)樣式神帅。
層疊
層疊再姑，是樣式在文檔層次中逐層疊加的過程，目的是讓瀏覽器面對某個(gè)標(biāo)簽特定屬性值得多個(gè)來源找御，確定最終使用哪個(gè)值元镀。
樣式來源
以下是瀏覽器層疊各個(gè)來源樣式的順序：
瀏覽器默認(rèn)的樣式表
用戶的樣式表
作者鏈接樣式表（按照它們鏈接到頁面的先后順序）
作者嵌入樣式
作者行內(nèi)樣式
瀏覽器會按上述順序依次檢查每個(gè)來源的樣式，并在有定義的情況下霎桅，更新對每個(gè)標(biāo)簽屬性值得設(shè)定栖疑。整個(gè)檢查更新過程結(jié)束后，再將每個(gè)標(biāo)簽已最終設(shè)定的樣式顯示出來滔驶。
比如遇革，如果作者鏈接樣式表將p的字體設(shè)定為Helvetica，而頁面中有一條嵌入規(guī)則以相同的選擇符吧字體設(shè)定為Verdana揭糕，那么段落文本最終會以Verdana字體顯示萝快。因?yàn)闉g覽器是在讀取鏈接樣式表之后讀取嵌入樣式。
層疊規(guī)則
層疊規(guī)則一：找到應(yīng)用給每個(gè)元素和屬性的所有聲明著角。
層疊規(guī)則二：按照順序和權(quán)重排序揪漩。瀏覽器一次檢查5個(gè)來源，并設(shè)定匹配的屬性吏口，如果匹配的屬性在下一個(gè)來源有定義奄容，則更新改屬性值。
聲明也可以加權(quán)重锨侯。比如：
p {color: green !important; font-size: 12pt;}
空格!important分號(;) 用于加重聲明的權(quán)重嫩海。
這條規(guī)則加重了將文本設(shè)置為綠色的權(quán)重。所以就算層疊的下一來源給段落設(shè)定了其他顏色囚痴，最終的顏色仍然還是綠色叁怪。
層疊規(guī)則三：按特指度排序。特指度是表示一條規(guī)則有多明確深滚。
比如某個(gè)樣式表中包含如下規(guī)則：
p {font-size: 12px;}
p.largetext {font-size: 16px;}
<p class="largetext">A bit of text</p>
那么上邊的p標(biāo)簽將顯示16px 文本奕谭，因?yàn)榈诙l規(guī)則的選擇符既包含標(biāo)簽名涣觉，又包含類名（特指度高）。
如果是下邊的樣式：
p {font-size: 12px;}
.largetext {font-size: 16px;}
<p class="largetext">A bit of text</p>
還是會顯示16px像素血柳，因?yàn)轭惖奶刂付雀摺?br>
層疊規(guī)則四 順序決定權(quán)重官册。如果兩條規(guī)則都影響某一元素的屬性，特指度也相同难捌，后出現(xiàn)的勝出膝宁。
計(jì)算特指度
計(jì)算特指度有一個(gè)記分規(guī)則，被稱為“ICE”公式：
I-C-E
I(ID)C(Class)E(Element)并非真正的三個(gè)數(shù)根吁，但是 0-1-12比0-2-0 小员淫。
ICE記分規(guī)則如下：
選擇符中有一個(gè)ID，在I的位置上加1击敌；
選擇符中有一個(gè)類介返，在C的位置上加1；
選擇符中有一個(gè)元素沃斤，在E的位置上加1圣蝎；
得到一個(gè)三位數(shù)。
好了衡瓶，我們來看一個(gè)例子：
選擇符
特指度
p 0-0-1
p.largetext
0-1-1
p#largetext
1-0-1
body p#largetext
1-0-2
body p#largetext ul.mylist
1-1-3
body p#largetext ul.mylist li
1-1-4
簡化版層疊規(guī)則
包含ID的選擇符勝過包含類的選擇符徘公，包含類的勝過包含標(biāo)簽的選擇符。
如果幾個(gè)不同來源都為同一個(gè)標(biāo)簽的同一個(gè)屬性定義了樣式鞍陨，行內(nèi)樣式勝過嵌入樣式步淹，嵌入樣式勝過鏈接樣式。在鏈接樣式表中诚撵，具有相同特指度的樣式，后聲明的優(yōu)先键闺。
規(guī)則一勝過規(guī)則二寿烟。
設(shè)定的樣式勝過繼承的樣式。
這一篇我們主要介紹了CSS規(guī)則辛燥，以及如何用它來為HTML應(yīng)用樣式筛武。
轉(zhuǎn)載自https://juejin.im/post/596f6c1e51882526426624ad
