摘要：，，層疊樣式表，請(qǐng)留意層疊概念。為了區(qū)分偽類(lèi)和偽元素，偽元素采用雙冒號(hào)寫(xiě)法。常見(jiàn)偽類(lèi)。常見(jiàn)偽元素。和偽元素的用法和下特有的，用于在渲染中向元素邏輯上的頭部或尾部添加內(nèi)容。

CSS，cascading style sheet，層疊樣式表，請(qǐng)留意層疊概念。

css3為了區(qū)分偽類(lèi)和偽元素，偽元素采用雙冒號(hào)寫(xiě)法。

常見(jiàn)偽類(lèi)——:hover,:link,:active,:target,:not(),:focus。

常見(jiàn)偽元素——::first-letter,::first-line,::before,::after,::selection。

 ::before和::after偽元素的用法

::before和::after下特有的content，用于在css渲染中向元素邏輯上的頭部或尾部添加內(nèi)容。
這些添加不會(huì)出現(xiàn)在DOM中，不會(huì)改變文檔內(nèi)容，不可復(fù)制，僅僅是在css渲染層加入。
所以不要用:before或:after展示有實(shí)際意義的內(nèi)容，盡量使用它們顯示修飾性?xún)?nèi)容，例如圖標(biāo)。
舉例：網(wǎng)站有些聯(lián)系電話，希望在它們前加一個(gè)icon?，就可以使用:before偽元素，如下：

12345645654

::before 和:before有什么區(qū)別？
這個(gè)問(wèn)題看來(lái)很簡(jiǎn)單，但如果之前沒(méi)有琢磨這個(gè)問(wèn)題，給人感覺(jué)也是門(mén)頭一垂，聽(tīng)到這個(gè)題目就懵逼了，因?yàn)樵瓉?lái)從來(lái)沒(méi)有注意過(guò)這個(gè)問(wèn)題，即便有注意這個(gè)問(wèn)題也不能很好的回答清楚?；卮鸬募记删褪菑南嗤c(diǎn)和不同點(diǎn)，以及他們的作用，及注意事項(xiàng)上去回答。

解答要點(diǎn)
 
相同點(diǎn)
都可以用來(lái)表示偽類(lèi)對(duì)象，用來(lái)設(shè)置對(duì)象前的內(nèi)容
:befor和::before寫(xiě)法是等效的
 
不同點(diǎn)
:befor是Css2的寫(xiě)法，::before是Css3的寫(xiě)法
:before的兼容性要比::before好 ，不過(guò)在H5開(kāi)發(fā)中建議使用::before比較好

加分項(xiàng)
偽類(lèi)對(duì)象要配合content屬性一起使用
偽類(lèi)對(duì)象不會(huì)出現(xiàn)在DOM中，所以不能通過(guò)js來(lái)操作，僅僅是在 CSS 渲染層加入
偽類(lèi)對(duì)象的特效通常要使用:hover偽類(lèi)樣式來(lái)激活

.test:hover::before { /* 這時(shí)animation和transition才生效 */ }  

序列選擇器

#1、作用：
css3中新推出的選擇器中，最具代表性的的9個(gè)，又稱(chēng)為序列選擇器，過(guò)去的選擇器中要選中某個(gè)必須加id或class，學(xué)習(xí)了這9個(gè)后，不用加id或class，想選中同級(jí)別的第幾個(gè)就選第幾個(gè)

#2、格式
#2.1 同級(jí)別
:first-child    p:first-child    同級(jí)別的第一個(gè)
:last-child    p:last-child    同級(jí)別的最后一個(gè)
:nth-child(n)                    同級(jí)別的第n個(gè)
:nth-last-child(n)            同級(jí)別的倒數(shù)第n個(gè)

#2.2 同級(jí)別同類(lèi)型
:first-of-type                    同級(jí)別同類(lèi)型的第一個(gè)
:last-of-type                    同級(jí)別同類(lèi)型的最后一個(gè)
:nth-of-type(n)                    同級(jí)別同類(lèi)型的第n個(gè)
:nth-last-of-type(n)            同級(jí)別同類(lèi)型的倒數(shù)第n個(gè)

#2.3 其他
:only-of-type                    同類(lèi)型的唯一一個(gè)
:only-child                         同級(jí)別的唯一一個(gè)

#1、同級(jí)別的第一個(gè)
#1.1 示范一
p:first-child { 
    color: red;
}
代表：同級(jí)別的第一個(gè)，并且第一個(gè)要求是一個(gè)p標(biāo)簽

我是段落1
我是段落2
我是段落3
我是段落4
我是段落5

    
我是段落6


這樣的話第一個(gè)p和div中的第一個(gè)p都變成紅色，

#1.2 示范二
p:first-child {
    color: red;
}
代表：同級(jí)別的第一個(gè)，并且第一個(gè)要求是一個(gè)p標(biāo)簽

w我是標(biāo)題
我是段落1
我是段落2
我是段落3
我是段落4
我是段落5

    
我是段落6


這樣的話只有div中的第一個(gè)p變紅，因?yàn)樵谟性赿iv內(nèi)同一級(jí)別的第一個(gè)才是p

注意點(diǎn)：
    :fist-child就是第一個(gè)孩子，不區(qū)分類(lèi)型

#2、同級(jí)別的最后一個(gè)
p:last-child {
    color: red;
}
代表：同級(jí)別的最后一個(gè)，并且最后一個(gè)要求是一個(gè)p標(biāo)簽

我是標(biāo)題
我是段落1
我是段落2
我是段落3
我是段落4
我是段落5

    
我是段落6

我是段落7
這樣的話只有6跟7都變紅

#3、同級(jí)別的第n個(gè)
p:nth-child(3) {
    color: red;
}
代表：同級(jí)別的第3個(gè)，并且第3個(gè)要求是一個(gè)p標(biāo)簽

我是標(biāo)題
我是段落1
我是段落2
我是段落3
我是段落4
我是段落5

    
我是段落6.1
    
我是段落6.2
    
我是標(biāo)題

我是段落7
這樣的話只有“我是段落2”變紅

#4、同級(jí)別的倒數(shù)第n個(gè)
p:nth-last-child(3) {
    color: red;
}
代表：同級(jí)別的倒數(shù)第3個(gè)，并且第3個(gè)要求是一個(gè)p標(biāo)簽
我是標(biāo)題
我是段落1
我是段落2
我是段落3
我是段落4
我是段落5

    
我是段落6.1
    
我是段落6.2
    
我是標(biāo)題

我是段落7
這樣的話只有“我是段落6.1”和“我是段落5”被選中

我是標(biāo)題
我是段落1
我是段落2
我是段落3
我是段落4
我是段落5

    
我是段落6.1
    
我是段落6.2
    
我是標(biāo)題

我是段落7
#1、同級(jí)別同類(lèi)型的第一個(gè)
p:first-of-type {
    color: red;
}
“我是段落1”和“我是段落6.1”被選中

#2、同級(jí)別同類(lèi)型的最后一個(gè)
p:last-of-type {
    color: red;
}
“我是段落7”和“我是段落6.2”被選中

#3、同級(jí)別同類(lèi)型的第n個(gè)
p:nth-of-type(2) {
    color: red;
}
“我是段落2”和“我是段落6.2”被選中

#4、同級(jí)別同類(lèi)型的倒數(shù)第n個(gè)
p:nth-last-of-type(2) {
    color: red;
}
“我是段落5”和“我是段落6.1”被選中

#1、同類(lèi)型的唯一一個(gè)
p:only-of-type {
    color: red;
}

我是標(biāo)題

    
我是段落6.1
    
我是段落6.2
    
我是標(biāo)題

我是段落7

“我是段落7“被選中

#2、同級(jí)別的唯一一個(gè)
p:only-child {
    color: red;
}

我是標(biāo)題

    
我是段落6.1

我是段落7
“我是段落6.1”被選中

屬性選擇器

#1、作用：根據(jù)指定的屬性名稱(chēng)找到對(duì)應(yīng)的標(biāo)簽，然后設(shè)置屬性
       該選擇器，最常用于input標(biāo)簽
 
#2、格式與具體用法：
    [屬性名]
    其他選擇器[屬性名]
    [屬性名=值]
    [屬性名^=值]
    [屬性名$=值]
    [屬性名*=值]


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

!DOCTYPE html>


    
    

    


    
哈哈啊
    
我是段落
    
我是段落
    
我是段落
    我是我
    http://www.baidu.com
    https://www.baidu.com
    
    
    
我是段落
    
我是段落

 兄弟選擇器

#1、作用：給指定選擇器后面緊跟的那個(gè)選擇器選中的標(biāo)簽設(shè)置屬性

#2、格式
選擇器1+選擇器2 {
    屬性：值;
}

#3、注意點(diǎn)：
1、相鄰兄弟選擇器必須通過(guò)+號(hào)鏈接
2、相鄰兄弟選擇器只能選中你緊跟其后的那個(gè)標(biāo)簽，不能選中被隔開(kāi)的標(biāo)簽

#1、作用：給指定選擇器后面的所有選擇器中的所有標(biāo)簽設(shè)置屬性

#2、格式：
選擇器1~選擇器2 {
    屬性：值;
}

#3、注意點(diǎn)：
1、通用兄弟選擇器必須用~來(lái)鏈接
2、通用兄弟選擇器選中的是指選擇器后面的某個(gè)選擇器選中的所有標(biāo)簽
無(wú)論有沒(méi)有被隔開(kāi)，都可以被選中

偽類(lèi)選擇器

#1、作用：常用的幾種偽類(lèi)選擇器。

#1.1 沒(méi)有訪問(wèn)的超鏈接a標(biāo)簽樣式：
a:link {
  color: blue;
}

#1.2 訪問(wèn)過(guò)的超鏈接a標(biāo)簽樣式：
a:visited {
  color: gray;
}

#1.3 鼠標(biāo)懸浮在元素上應(yīng)用樣式：
a:hover {
  background-color: #eee; 
}

#1.4 鼠標(biāo)點(diǎn)擊瞬間的樣式：
a:active {
  color: green;
}

#1.5 input輸入框獲取焦點(diǎn)時(shí)樣式：
input:focus {
  outline: none;
  background-color: #eee;
}

#2 注意：
1 a標(biāo)簽的偽類(lèi)選擇器可以多帶帶出現(xiàn)，也可以一起出現(xiàn)
2 a標(biāo)簽的偽類(lèi)選擇器如果一起出現(xiàn)，有嚴(yán)格的順序要求，否則失效
    link，visited，hover，active
3 hover是所有其他標(biāo)簽都可以使用的
4 focus只給input標(biāo)簽使用

    
    

    


點(diǎn)擊我

偽元素選擇器

#1、常用的偽元素。
#1.1 first-letter：雜志類(lèi)文章首字母樣式調(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)容前面加上一個(gè)紅色的*。

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

p:after {
  content: "?";
  color: red;
}
在所有p標(biāo)簽的內(nèi)容后面加上一個(gè)藍(lán)色的?。

    
    

    


英雄不問(wèn)出處，流氓不論歲數(shù)
老男孩是干什么的
老男孩是干什么的
老男孩是干什么的

CSS三大特性

1、繼承性

#1、定義：給某一個(gè)元素設(shè)置一些屬性，該元素的后代也可以使用，這個(gè)我們就稱(chēng)之為繼承性

#2、注意：
    1、只有以color、font-、text-、line-開(kāi)頭的屬性才可以繼承
    2、a標(biāo)簽的文字顏色和下劃線是不能繼承別人的
    3、h標(biāo)簽的文字大小是不能繼承別人的，會(huì)變大，但是會(huì)在原來(lái)字體大小的基礎(chǔ)上變大
    
    ps:打開(kāi)瀏覽器審查元素可以看到一些inherited from。。。的屬性
#3、應(yīng)用場(chǎng)景：
    通?；诶^承性統(tǒng)一設(shè)置網(wǎng)頁(yè)的文字顏色，字體，文字大小等樣式

2、層疊性

#1、定義：CSS全稱(chēng)：Cascading StyleSheet層疊樣式表，層疊性指的就是CSS處理沖突的一種能力，即如果有多個(gè)選擇器選中了同一個(gè)標(biāo)簽?zāi)敲磿?huì)有覆蓋效果

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

3、優(yōu)先級(jí)

#1、定義：當(dāng)多個(gè)選擇器選中同一個(gè)標(biāo)簽，并且給同一個(gè)標(biāo)簽設(shè)置相同的屬性時(shí)，如何層疊就由優(yōu)先級(jí)來(lái)確定

#2、優(yōu)先級(jí)
    整體優(yōu)先級(jí)從高到底：行內(nèi)樣式>嵌入樣式>外部樣式

    行內(nèi)樣式并不推薦使用，所以我們以嵌入為例來(lái)介紹優(yōu)先級(jí)

注意：

1、大前提：直接選中 > 間接選中(即繼承而來(lái)的)
2、如果都是間接選中，那么誰(shuí)離目標(biāo)標(biāo)簽比較近，就聽(tīng)誰(shuí)的
3、如果都是直接選中，并且都是同類(lèi)型的選擇器，那么就是誰(shuí)寫(xiě)的在后面就聽(tīng)誰(shuí)的
4、如果都是直接選中，并且是不同類(lèi)型的選擇器，那么就會(huì)按照選擇器的優(yōu)先級(jí)來(lái)層疊
    id > 類(lèi) > 標(biāo)簽 > 通配符(也算直接選中) > 繼承 > 瀏覽器默認(rèn)（即沒(méi)有設(shè)置任何屬性）
5、優(yōu)先級(jí)之!important
　　

#1、作用：還有一種不講道理的!import方式來(lái)強(qiáng)制指定的屬性的優(yōu)先級(jí)提升為最高，但是不推薦使用。因?yàn)榇罅渴褂?import的代碼是無(wú)法維護(hù)的。
  
#2、注意：
    1、!important只能用于直接選中，不能用于間接選中
    2、!important只能用于提升被指定的屬性的優(yōu)先級(jí)，其他屬性的優(yōu)先級(jí)不會(huì)被提升
    3、!important必須寫(xiě)在屬性值分號(hào)的前面

6、優(yōu)先級(jí)之權(quán)重計(jì)算

#1、強(qiáng)調(diào)
如果都是直接選中，并且混雜了一系列其他的選擇器一起使用時(shí)，則需要通過(guò)計(jì)算機(jī)權(quán)重來(lái)判定優(yōu)先級(jí)

#2、計(jì)算方式
#1、id數(shù)多的優(yōu)先級(jí)高
#2、id數(shù)相同，則判定類(lèi)數(shù)多的優(yōu)先級(jí)高
#3、id數(shù)、class數(shù)均相同，則判定標(biāo)簽數(shù)多的優(yōu)先級(jí)高
#4、若id數(shù)、class數(shù)、標(biāo)簽數(shù)均相同，則無(wú)需繼續(xù)往下計(jì)算了，誰(shuí)寫(xiě)在后面誰(shuí)的優(yōu)先級(jí)高