日期: 2020-10-03
1. CSS 選擇器分類
- 通配符 *
- 標(biāo)簽選擇器
- 類典尾、偽類選擇器
- id 選擇器
- 派生選擇器
1. * : 匹配 HTML 中所有的元素
* 的性能差, 因?yàn)樗ヅ渌械脑? 所以開發(fā)時(shí), 不建議使用
通配符
*, 匹配HTML 中所有的元素
2. 標(biāo)簽選擇器: 用來(lái)匹配對(duì)應(yīng)的標(biāo)簽
html 的標(biāo)簽都可以作為 選擇器
p {
font-size:16px;
color:green;
}
3. 類選擇器: 用來(lái)選擇 class 命名的標(biāo)簽
class 名稱前加 點(diǎn)號(hào)
.
.wrapper {
color: red;
}
<div class="wrapper">this is a division</div>
<p class="wrapper"> this is a paragraph</p>
4. ID 選擇器: 用來(lái)選擇 id 命名的標(biāo)簽
id 是唯一的,只能給定義一個(gè), id 名稱前加
#
#content {
color : grey;
}
<span id="content">this is a span</span>
5. 派生選擇器: 根據(jù)上下文確定要選擇的標(biāo)簽
層級(jí)之間用空格 或者大于號(hào) ( > )隔開
.box2 li {
color: yellowgreen;
}
<ul class="box1">
<li>1.1</li>
<li>1.2</li>
<li>1.3</li>
<li>1.4</li>
</ul>
<ul class="box2">
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
<li>2.4</li>
<ul><li>examle 1 <li><li>examle 2 <li></ul>
</ul>
6. 偽類選擇器 （后面講）
:hover
2. 選擇器分組
- 讓多個(gè)選擇器（元素）具有相同的樣式，一般用于設(shè)置公共樣式匈辱。
- 被分組的選擇器可以分享相同的聲明缔刹，用逗號(hào) （,） 將需要分組的選擇器分開球涛。
h1, p, .box1, .box2 { color: blue;}
3. 選擇器繼承
子元素可以繼承父元素的樣式，反之不可以校镐。
4. 樣式權(quán)重
如果外部樣式亿扁，內(nèi)部樣式，內(nèi)聯(lián)樣式 同時(shí)應(yīng)用于同一個(gè)元素鸟廓， 就是使用多重樣式的情況魏烫， 這種情況下的優(yōu)先級(jí)一般情況是
內(nèi)聯(lián)樣式 > 內(nèi)部樣式 > 外部樣式
!important(10000) >內(nèi)聯(lián)樣式（1000） >id 選擇器（100）>l類、 偽類選擇器（10） >標(biāo)簽選擇器( 1 )
<style>
/* 權(quán)重計(jì)算： 100 + 1 + 10 + 1 = 112 */
#content div.main_content h2 {
color: red;
}
/* 權(quán)重計(jì)算： 100 + 10 + 1 = 111 */
#content .main_content h2 {
color: blue;
}
</style>
<div id="content" >
<div class="main_content" >
52
<h2> this is a h2 title </h2>
</div>
</div>
這是一個(gè) 派生選擇器肝箱，設(shè)置的是 h2 的屬性哄褒，所以 h2 會(huì)被高權(quán)重的 設(shè)置為紅色， 52 不會(huì)被設(shè)置
