1筒饰、css的語法規(guī)則
- 由css選擇器（selector）,以及一條或多條聲明組成藤巢，用冒號分開
- 舉例：selector{porperty:value} 是key-value的方式
2.為什么會有選擇器泛释？
- 選擇器是匹配元素的一種模式，不止是在css中
3.基本的選擇器
- 元素選擇器
<p>
color: red;
</p>
- id選擇器
<style>
#notification {
font-size: 14px;
}
</style>
<p id="notification"></p>
- 類選擇器
<style>
.first {
font-weight: bold;
}
.done {
text-decoration: line-through;
}
</style>
<ul>
<li class="first done">起床</li>
<li class="second done">刷牙</li>
<li class="third">洗臉</li>
</ul>
- 通用選擇器
* {
box-sizing: border-box;
}
.flex-container * {
flex-basis: 100%;
}
- 屬性選擇器
[attr]
[attr] 選擇包含 attr 屬性的所有元素茎刚，不論 attr 的值為何。
[disabled] {
cursor: not-allowed;
}
[attr=val]
[attr=val] 僅選擇 attr 屬性被賦值為 val 的所有元素谎僻。
[data-color="gray"] {
color: #ccc;
}
[attr~=val]
[attr~=val] 僅選擇 attr 屬性的值（以空格間隔出多個值）中有包含 val 值的所有元素娄柳，比如位于被空格分隔的多個類（class）中的一個類。
[attr=val]
[attr=val] 選擇 attr 屬性的值中包含字符串 val 的元素艘绍。
[title*="fuck"] {
display: none;
}
[attr^=val]
[href^="http://"] {
background-color: #f0ad4e;
}
[attr$=val]
[attr$=val] 選擇 attr 屬性的值以 val 結(jié)尾（包括val）的元素赤拒。
[src$="gif"] {
border: 1px solid #ccc;
}
[attr|=val]
[attr|=val] 選擇 attr 屬性的值以 val（包括val）或 val-開頭的元素（-用來處理語言編碼）。
[lang|="zh"] {
font-family: '微軟雅黑';
}
- 偽類選擇器
a:link { ... }
a:visited { ... }
a:hover { ... }
a:active { ... }
li:first-child { ... }
li:last-child { ... }
body :not(p) { ... }
p:not(.warning) { ... }
- 為元素選擇器
.clearfix::after {
content: '';
clear: both;
display: block;
}
.happy::before {
content: '??';
}
p::selection {
color: white;
background: blue;
}
::backdrop 實驗特性
::first-line 將樣式只應(yīng)用于一個塊狀元素的首行诱鞠。
input::-webkit-input-placeholder {
color: #aaa;
}
介紹完了CSS選擇器挎挖，下面我們CSS權(quán)重問題
在介紹之前我們先來看一道題目
饑人谷三個字的最后的樣式是？看完這道題 小編來給你叨一叨CSS的權(quán)重~
1航夺、什么是CSS權(quán)重蕉朵？
- 權(quán)重決定了你CSS規(guī)則怎樣被瀏覽器解析直到生效，即你的
CSS規(guī)則是怎樣顯示的
2阳掐、權(quán)重之比
權(quán)重順序：始衅！important>內(nèi)聯(lián)>ID>類=偽類=屬性>標(biāo)簽（元素）=偽元素> 通配符
怎么確定權(quán)重？有幾句口訣來看看吧
- 從0開始：
- 一個行內(nèi)樣式+1000缭保；
- 一個id+100;
- 一個屬性/類/偽類+10汛闸；
- 一個元素/偽元素+1；
舉個栗子
p #cover . border a:havor
#cover--id選擇器加了100
.border--class類選擇器加了1艺骂；
最后的權(quán)重是： 0122
3.權(quán)重的基本規(guī)則
- 1诸老、相同的權(quán)重：最后面出現(xiàn)的選擇器為最后規(guī)則
- 2 不同的權(quán)值權(quán)重高則生效
4、對權(quán)重規(guī)則的總結(jié)一條樣式規(guī)則的整體權(quán)重值包含四個獨立部分：[A,B,C,D]
- A表示內(nèi)聯(lián)樣式彻亲，只要1或者0兩個值
- B表示規(guī)則中ID的數(shù)量
- C表示規(guī)則中標(biāo)簽和偽元素以外的其他選擇器數(shù)量
- D表示規(guī)則中標(biāo)簽和偽元素的數(shù)量比較時從高位到低位（從A到D）分別比較孕锄，高位相同才需要比較低位（從A到D）分別比較吮廉，高位相同才需要比較低位
- important 注意點：
- 如果多條規(guī)則中都對同一個屬性指定了!important,這時候苞尝！important的作用相互抵消，依然按照ABCD四組計算比較
- 宦芦！important的作用只有在具有唯一性時才能提現(xiàn)宙址，但是我們永遠無法預(yù)料自己什么時候又需要覆蓋一個已經(jīng)指定了！important的屬性调卑，所以最好的辦法就是不要使用抡砂。
5、CSS優(yōu)先級法則
- A)選擇器都有一個權(quán)值恬涧，權(quán)值越大越優(yōu)先
- B)當(dāng)權(quán)值相等時，后出現(xiàn)的樣式表要優(yōu)于先出現(xiàn)的樣式設(shè)置
- C)繼承的CSS樣式優(yōu)先級低于低于指定的CSS樣式
- D)在同一組屬性設(shè)置中標(biāo)
有“！important”規(guī)則的優(yōu)先級最大
再回到之前的題目
msg:100
content 100 p 1 101
.container 10 box 10 p 1 22
p 1 #msg 101
第二行和第四行的權(quán)重相同蛾坯，權(quán)重相同的情況下最后面出現(xiàn)的選擇器為最后規(guī)則括荡。
所以樣式是：粉色，14px
