一寡壮、基本選擇器

1贩疙、id選擇器

作用：根據(jù)指定的id名稱，在當(dāng)前界面中找到對應(yīng)的唯一一個的標(biāo)簽况既，然后設(shè)置屬性

注意：
1这溅、引用id一定要加#
2、id的命名只能由字符棒仍、數(shù)字悲靴、下劃線組成，且不能以數(shù)字開頭莫其，更不能是html關(guān)鍵字如p癞尚，a，img等

 #p1 {
            color: blue;
        }

2乱陡、類選擇器

作用：根據(jù)指定的類名稱浇揩，在當(dāng)前界面中找到對應(yīng)的標(biāo)簽，然后設(shè)置屬性

格式：

.類名稱 {
    屬性:值;
             }

.p1 {
            color: blue;
        }
.p2 {
            font-size: 10px;
        }

3蛋褥、標(biāo)簽選擇器

作用：根據(jù)指定的標(biāo)簽名稱临燃，在當(dāng)前界面中找到所有該名稱的標(biāo)簽睛驳，然后設(shè)置屬性

格式：

標(biāo)簽名稱 {
    屬性：值;
}

注意點：
1烙心、只要是HTML的標(biāo)簽都能當(dāng)做標(biāo)簽選擇器
2、標(biāo)簽選擇器選中的是當(dāng)前界面中的所有標(biāo)簽,而不能單獨選中某一標(biāo)簽
3乏沸、標(biāo)簽選擇器淫茵，無論嵌套多少層都能選中

4、通配符選擇器

作用：選擇所有標(biāo)簽

樣式：

* {
            font-size: 20px;
        }

二蹬跃、組合選擇器匙瘪、交集和并集選擇器

    <style>
        /*標(biāo)簽選擇器*/
        p {
            color: red;
        }

        /*后代選擇器*/
        div p {
            color: red;
        }
        
        /*相鄰兄弟選擇器*/
        div+p {
            color: green;
        }

        /*兄弟選擇器*/
        div~p {
            color: green;
        }

        /*子元素選擇器*/
        div>p {
            color: red;
        }

        .box1 ul p {
            color: red;
        }

    </style>

后代選擇器：找到指定標(biāo)簽的所有后代（兒子，孫子蝶缀，重孫子丹喻、、翁都、）標(biāo)簽碍论，設(shè)置屬性
1、后代選擇器必須用空格隔開
2柄慰、后代不僅僅是兒子鳍悠，也包括孫子税娜、重孫子
3、后代選擇器不僅僅可以使用標(biāo)簽名稱藏研，還可以使用其他選擇器比如id或class
4敬矩、后代選擇器可以通過空格一直延續(xù)下去

子元素選擇器：找到指定標(biāo)簽的所有特定的直接子元素，然后設(shè)置屬性
1蠢挡、子元素選擇器之間需要用>符號鏈接弧岳，并且不能有空格
比如div >p會找div標(biāo)簽的所有后代標(biāo)簽，標(biāo)簽名為">p"
2业踏、子元素選擇器只會查找兒子缩筛，不會查找其他嵌套的標(biāo)簽
3、子元素選擇器不僅可以用標(biāo)簽名稱堡称，還可以使用其他選擇器,比如id或class
4瞎抛、子元素選擇器可以通過>符號一直延續(xù)下去

相鄰兄弟選擇器：選定緊跟其后的那個標(biāo)簽
1、毗鄰選擇器必須通過+號鏈接
2却紧、毗鄰選擇器只能選中緊跟其后的那個標(biāo)簽桐臊，不能選中被隔開的標(biāo)簽

兄弟選擇器：給指定選擇器后面的所有選擇器中的所有標(biāo)簽設(shè)置屬性
1、通用兄弟選擇器必須用~來鏈接
2晓殊、通用兄弟選擇器選中的是指選擇器后面的某個選擇器選中的所有標(biāo)簽
無論有沒有被隔開断凶，都可以被選中

交集選擇器：給所有選擇器選中的標(biāo)簽中，相交的那部分標(biāo)簽設(shè)置屬性
1巫俺、選擇器與選擇器之間沒有任何鏈接符號
2认烁、選擇器可以使用標(biāo)簽名稱、id介汹、class
3却嗡、交集選擇器在企業(yè)開發(fā)中并不多見，了解即可
因為：p.part1 完全可以用.part1取代

并集選擇器：給所有滿足條件的標(biāo)簽設(shè)置屬性
1嘹承、選擇器與選擇器之間必須用逗號來鏈接
2窗价、選擇器可以使用標(biāo)簽名稱、id叹卷、class

三撼港、序列選擇器

格式

1 同級別

:first-child p:first-child 同級別的第一個
:last-child p:last-child 同級別的最后一個
:nth-child(n) 同級別的第n個
:nth-last-child(n) 同級別的倒數(shù)第n個

2 同級別同類型

:first-of-type 同級別同類型的第一個
:last-of-type 同級別同類型的最后一個
:nth-of-type(n) 同級別同類型的第n個
:nth-last-of-type(n) 同級別同類型的倒數(shù)第n個

3 其他

:only-of-type 同類型的唯一一個
:only-child 同級別的唯一一個

四、屬性選擇器（最常用于input標(biāo)簽）

根據(jù)指定的屬性名稱找到對應(yīng)的標(biāo)簽骤竹，然后設(shè)置屬性

 例1：找到所有包含id屬性的標(biāo)簽
        [id]
    
    例2：找到所有包含id屬性的p標(biāo)簽
        p[id]
    
    例3：找到所有class屬性值為part1的p標(biāo)簽
        p[class="part1"]
    
    例4：找到所有href屬性值以https開頭的a標(biāo)簽
        a[href^="https"]
        
    例5：找到所有src屬性值以png結(jié)果的img標(biāo)簽
        img[src$="png"]
        
    例6：找到所有class屬性值中包含part2的標(biāo)簽
        [class*="part"] 

五帝牡、偽類選擇器

1、作用：常用的幾種偽類選擇器蒙揣。

1.1 沒有訪問的超鏈接a標(biāo)簽樣式：

a:link {
  color: blue;
}

1.2 訪問過的超鏈接a標(biāo)簽樣式：

a:visited {
  color: gray;
}

1.3 鼠標(biāo)懸浮在元素上應(yīng)用樣式：

a:hover {
  background-color: #eee; 
}

1.4 鼠標(biāo)點擊瞬間的樣式：

a:active {
  color: green;
}

1.5 input輸入框獲取焦點時樣式：

input:focus {
  outline: none;
  background-color: #eee;
}

2靶溜、 注意：

1. a標(biāo)簽的偽類選擇器可以單獨出現(xiàn)，也可以一起出現(xiàn)
2. a標(biāo)簽的偽類選擇器如果一起出現(xiàn)鸣奔，有嚴(yán)格的順序要求墨技，否則失效
   link惩阶，visited，hover扣汪，active
3. hover是所有其他標(biāo)簽都可以使用的
4. focus只給input標(biāo)簽使用

六断楷、偽元素選擇器

1、常用的偽元素崭别。

1.1 first-letter：雜志類文章首字母樣式調(diào)整

例如：

p:first-letter {
  font-size: 48px;
}

1.2 before

用于在元素的內(nèi)容前面插入新內(nèi)容冬筒。
例如：

p:before {
  content: "*";
  color: red;
}

在所有p標(biāo)簽的內(nèi)容前面加上一個紅色的*。

1.3 after

用于在元素的內(nèi)容后面插入新內(nèi)容茅主。
例如：

p:after {
  content: "?";
  color: red;
}

七舞痰、CSS的三大特性

1、繼承性

（1）定義：給某一個元素設(shè)置一些屬性诀姚，該元素的后代也可以使用响牛，這個我們就稱之為繼承性

（2）注意：
1、只有以color赫段、font-呀打、text-、line-開頭的屬性才可以繼承
2糯笙、a標(biāo)簽的文字顏色和下劃線是不能繼承別人的
3贬丛、h標(biāo)簽的文字大小是不能繼承別人的，會變大给涕，但是會在原來字體大小的基礎(chǔ)上變大

ps:打開瀏覽器審查元素可以看到一些inherited from豺憔。。够庙。的屬性

（3）應(yīng)用場景：
通彻вΓ基于繼承性統(tǒng)一設(shè)置網(wǎng)頁的文字顏色，字體首启，文字大小等樣式

2暮屡、層疊性

（1）定義：CSS全稱：Cascading StyleSheet層疊樣式表剩拢，層疊性指的就是CSS處理沖突的一種能力慨绳，即如果有多個選擇器選中了同一個標(biāo)簽?zāi)敲磿懈采w效果

（2）注意：
層疊性只有在多個選擇器選中了同一個標(biāo)簽珍手，然后設(shè)置了相同的屬性，
才會發(fā)生層疊性
ps：通過谷歌瀏覽器可以查看到钥飞，一些屬性被劃掉了

3、優(yōu)先級

定義：當(dāng)多個選擇器選中同一個標(biāo)簽衫嵌，并且給同一個標(biāo)簽設(shè)置相同的屬性時读宙，如何層疊就由優(yōu)先級來確定, 整體優(yōu)先級從高到底：行內(nèi)樣式>嵌入樣式>外部樣式.

1. 大前提：直接選中 > 間接選中(即繼承而來的)

2. 如果都是間接選中，那么誰離目標(biāo)標(biāo)簽比較近楔绞，就聽誰的

3. 如果都是直接選中结闸，并且都是同類型的選擇器唇兑，那么就是誰寫的在后面就聽誰的

4. 如果都是直接選中，并且是不同類型的選擇器桦锄，那么就會按照選擇器的優(yōu)先級來層疊

   id > 類 > 標(biāo)簽 > 通配符(也算直接選中) > 繼承 > 瀏覽器默認(rèn)（即沒有設(shè)置任何屬性）

5. !important直接提升該優(yōu)先級

* {
            color: yellow !important;
        }

6. 權(quán)重計算

• id數(shù)多的優(yōu)先級高
• id數(shù)相同扎附，則判定類數(shù)多的優(yōu)先級高
• id數(shù)、class數(shù)均相同结耀，則判定標(biāo)簽數(shù)多的優(yōu)先級高
• 若id數(shù)留夜、class數(shù)、標(biāo)簽數(shù)均相同图甜，則無需繼續(xù)往下計算了碍粥，誰寫在后面誰的優(yōu)先級高