日期: 2020-10-03

1. CSS 選擇器分類

1. 通配符 *
2. 標(biāo)簽選擇器
3. 類、偽類選擇器
4. id 選擇器
5. 派生選擇器

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. 選擇器分組

1. 讓多個(gè)選擇器（元素）具有相同的樣式，一般用于設(shè)置公共樣式。
2. 被分組的選擇器可以分享相同的聲明，用逗號(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è)置