css選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css學習</title>
</head>
<style>
.h1 {
color: aliceblue;
}
#page-title {
color: red;
}
.title {
color: aqua;
}
</style>
<body>
<header class="page-header">
<h1 class="title" id="page-title">深入解析css</h1>
<nav>
<ul id="main-nav" class="nav">
<li>
<a href="/" class="featured">導航1</a>
</li>
<li>
<a href="/">導航2</a>
</li>
</ul>
</nav>
</header>
</body>
</html>
上面是一個簡單的html案例树姨，對于同一個元素應用多個規(guī)則時，規(guī)則中可能包含沖突的聲明闺兢，在style樣式表中包含了三個規(guī)則集茂缚，每一個規(guī)則給它指定了不同的字體顏色。標題不可能同時擁有三種顏色屋谭，所以最終的效果是顯示的紅色(red)脚囊。
瀏覽器如何知道并解決聲明沖突，這其中層疊指的就是這一系列規(guī)則桐磁。它決定了如何解決沖突悔耘，是css語言的基礎。層疊會依據(jù)三種條件解決沖突我擂。
- 樣式表的來源: 樣式是從哪里來的衬以，包括你的樣式和瀏覽器默認樣式等。
- 選擇器優(yōu)先級: 哪些選擇器比另一些選擇器更重要校摩。
- 源碼順序: 樣式在樣式表里的聲明順序看峻。
疊層的規(guī)則是按照這種順序來考慮的，看下圖
聲明沖突
|
|
不同的來源或者重要新 ---是---> 使用更高優(yōu)先級的來源里的聲明
|
否
|
是不是內(nèi)聯(lián)樣式(作用域) ---是---> 使用內(nèi)聯(lián)聲明
|
否
|
選擇器是否有不同的優(yōu)先級 ---是---> 使用更高優(yōu)先級的聲明
|
否
|
使用源碼順序里較晚出現(xiàn)的聲明
這些規(guī)則讓瀏覽器可以以預測的方式解決css樣式規(guī)則中的沖突衙吩。
樣式表的來源
你添加到網(wǎng)頁里的樣式表并不是瀏覽器唯一使用的樣式表互妓，還有其他類型或來源的樣式表。你的樣式表屬于作者樣式表坤塞，除此之外還有用戶代理樣式表冯勉，即瀏覽器默認的樣式。用戶代理樣式表優(yōu)先級低尺锚，你的樣式會覆蓋它們珠闰。
用戶代理樣式表在不同瀏覽器上稍有差異，但是大體上是在做相同的事情：為標題<h1>到<h6>和段落<p>添加上下邊距瘫辩，為列表<ol>,<ul>添加左側內(nèi)邊距伏嗜，為鏈接添加顏色，為元素添加各種默認字號伐厌。
瀏覽器應用了用戶代理樣式表后才會應用你的樣式表承绸，即作者樣式表，你指定的聲明會覆蓋用戶代理樣式表里面的樣式挣轨，如果在html里鏈接了多個樣式表军熏，那么它們的來源都相同，即屬于作者樣式表卷扮。
用戶代理樣式表因為設置了用戶需要的樣式荡澎，所以不會做出一些超出預期的事情均践，當不喜歡默認樣式的時候，可以在自己的樣式表里面設置別的樣式來覆蓋用戶代理樣式即可摩幔。
覆蓋用戶代理樣式
作為一個標準的前端打工仔彤委，必定熟悉覆蓋代理樣式。這種做法實際上就是利用了層疊的樣式來源規(guī)則或衡。你寫的樣式會覆蓋用戶代理樣式焦影，因為來源不同。
樣式來源規(guī)則有一個例外封断，標記為重要!important的聲明斯辰。該聲明就會被標記為重要的聲明。
color:red !important;
標記了!important的聲明會被當做更高優(yōu)先級的來源坡疼，因此總體的優(yōu)先級按照由高到低排列彬呻，如下所示：
- 作者的
!important - 作者
- 用戶代理
理解優(yōu)先級
如果無法用來源解決沖突聲明，瀏覽器會嘗試檢查它們的優(yōu)先級回梧。理解優(yōu)先級很重要废岂，因為作者樣式幾乎都是屬于優(yōu)先級的范圍，日常工作接觸的大部分開發(fā)樣式是來自于同源狱意，如果不理解優(yōu)先級湖苞，寫出來的css樣式會被坑的很慘。
瀏覽器將優(yōu)先級分為兩部分：HTML的行內(nèi)樣式和選擇器的樣式详囤。
行內(nèi)樣式
如果HTML的style屬性寫樣式财骨，這個聲明只會作用域當前元素。實際上行內(nèi)元素屬于“帶作用域”的聲明藏姐，它會覆蓋任何來自樣式表或<style>標簽的樣式隆箩。行內(nèi)樣式?jīng)]有選擇器，因為它們直接作用于所在的元素羔杨。
<li>
<a href="/" class="featured" style="color:yellow;">導航1</a>
</li>
上面就是一個行內(nèi)樣式捌臊，設置了顏色color為黃色yellow。
如果你希望在樣式表中覆蓋行內(nèi)樣式的聲明兜材，需要在樣式表中對應標簽下的聲明后添加!importanta理澎，這樣能夠將它提升到一個更高優(yōu)先級來源。但如果行內(nèi)樣式也被標記為!imortant那就無法覆蓋它了曙寡。最好不要在行內(nèi)使用!important糠爬，而是只在樣式表中使用!important。
選擇器優(yōu)先級
優(yōu)先級的第二部分是由選擇器優(yōu)先級決定举庶。比如执隧，有兩個類名的選擇器比只有一個類名的選擇器優(yōu)先級更高。具體可以看下面的案例。
通過比較選擇器類型來決定哪個選擇器優(yōu)先值最高镀琉。
/* 四個標簽 */
html body header h1{
color:blue;
}
/* 3個標簽和1個類 */
body header .page-header h1{
color:orange;
}
/* 2個類 */
.page-header .title{
color:green;
}
/* 1個id */
#page-title{
color:red;
}
上面的樣式表中最終顯示的color顏色值為紅色(red)峦嗤。
優(yōu)先級標記
一個常用的表示優(yōu)先級的方式是用數(shù)組形式來標記，通常用都好隔開每個數(shù)滚粟。比如“1寻仗，2，3”表示用1個id凡壤、2個類、2個標簽組成耙替。優(yōu)先級最高的id列為第一位亚侠，緊接著是類，最后是標簽俗扇。
我們可以通過下面的表格來查看各種選擇器和對應的優(yōu)先級硝烂。
| 選擇器 | id | 類 | 標簽 | 標記 |
|---|---|---|---|---|
| html body header ul | 0 | 0 | 4 | 0,0,4 |
| Body header.page-header h1 | 0 | 1 | 3 | 0,1,3 |
| .page-header .title | 0 | 2 | 0 | 0,2,0 |
| #page-title | 1 | 0 | 0 | 1,0,0 |
現(xiàn)在，通過比較數(shù)值就能快速明確決定哪個優(yōu)先級更高铜幽。所以上面的順序是"1,0,0">"0,2,0">"0,1,3">"0,0,4"滞谢。而優(yōu)先級低的樣式表會被優(yōu)先級高的樣式表給覆蓋。
我們?nèi)粘ｉ_發(fā)不建議某個元素的樣式表寫過長的標簽名和類名連體除抛。一般只要能夠區(qū)分優(yōu)先級即可狮杨。
源碼順序
疊層的第三步，也是最后一步到忽，是源碼順序橄教。如果兩個聲明的來源和優(yōu)先級相同，其中一個聲明在樣式表中出現(xiàn)較晚喘漏，或者位于頁面較晚引入的樣式表中护蝶，則該聲明勝出。
.nav a{
color:white;
}
a.featured{
color:gray;
}
在上面方法中翩迈，選擇器優(yōu)先級相同持灰，都是(0,1,1)，最終瀏覽器呈現(xiàn)的顏色color是灰色gray负饲。
