【2018/03/30更新】我居然不知道CSS的這兩個用法昆箕，今天看到，慚愧至極

1. div > p
   ? 選擇div下一級的所有p元素纪挎。他與 div p的區(qū)別是辆毡，前者只選擇下一級元素，后者則選擇div下所有子元素中為p元素的標(biāo)簽怪得。
2. p + span
   ? 選擇緊隨p元素的span元素咱枉，p與span是同級關(guān)系卑硫。

# 前言：

? 你的代碼中是否每個標(biāo)簽都定義了一個類？完成一個頁面后是否覺得代碼很亂很擁擠蚕断？看見github優(yōu)秀代碼清爽簡潔欢伏，想過你真的精通 ‘CSS’ 嗎？想要進階亿乳？不妨撿起CSS最容易被新手忽視與遺漏的模塊：偽類 & 偽元素

CSS偽類[Pseudo-classes]颜懊，用于向某些選擇器提供特殊效果。

# 語法

偽類的語法：selector:pseudo-class {property:value;}
配合css類使用: selector.class:pseudo-class {property:value;}
?

# 錨[anchor]偽類 - 鏈接

? 鏈接有不同的狀態(tài)风皿，為了區(qū)分和提高用戶體驗河爹，可以利用css偽類對鏈接不同狀態(tài)顯示不同的樣式

a:link { color: #ff0000; }   /* 未訪問的鏈接 */
a:focus { color: #00ff00; }   /* 獲得焦點的鏈接 */
a:visited { color:  #0000ff; }   /* 已訪問的鏈接 */
a:hover { color: #ff00ff; }   /* 鼠標(biāo)劃過鏈接 */
a:active { color: #ffcc00; }   /* 點擊時的鏈接 */

需要特別注意的是：

1. 在css定義中，a:hover是必須定義在a:link和a:visited之后才能生效【如果有】桐款；
2. a:active必須定義在a:hover之后才能生效【如果有】咸这；
3. 偽類名稱對大小寫不敏感，大小寫均生效魔眨。
   ?

# 偽類配合css類使用

? 偽類不僅能跟在一個標(biāo)簽名后面媳维，也能跟在樣式類的后面。

<style type="text/css">
    a.linkme:visited { color: #ff0000; }
</style>
<a class="linkme" href="css-syntax.html">css 語法</a>

?

# [CSS2] :first-child偽類

? 在理解這個偽類的時候遏暴，走了不少誤區(qū)侄刽，為了方便大家理解和自己回顧時更迅速撿起來，如下舉例說明
假設(shè)有如下html：

1. <div>
2.    <p>I am the first element</p>
3.     <ul>
4.         <li>I am the first li emelent</li>
5.         <li>some text <strong>here</strong> </li>
6.         <li>go on</li>
7.     </ul>
8.     <p><em>who</em> know what I am</p>
9. </div>

【分析】上面的例子中朋凉，能夠作為 first-child 的元素有 行2 的p元素州丹，行4 的li元素， 行5 的 strong元素杂彭， 行8 的em元素墓毒；
如果給定以下規(guī)則：

p:first-child {
    color: red;
}
li:first-child {
    font-weight: bold;
}

則，行2 的p元素的文案顏色將改成紅色亲怠，行4 的li元素文案將被加粗所计。
【誤區(qū)】認(rèn)為p:first-child{ color:red; } 會將p元素的第一個子元素文案置紅，其實不然团秽。要明白主胧，偽類都是對選擇器自身進行加工。
【要點】必須聲明 <!DOCTYPE>习勤， 才能使 :first-child 在 IE 中生效踪栋。
【聯(lián)想】學(xué) :first-child 必定要想到 :nth-child(an+b) ；注意區(qū)分姻报，:nth-child(1) 是用于對父元素的子元素索引進行查找己英，具體見后面 :nth-child(an+b) 模塊
【經(jīng)典案例】

1. 匹配 第一個 <p> 元素

該用例中间螟，選擇器匹配作為任何元素的第一個子元素的<p>元素

p:first-child {
    color: red;
}

2. 匹配所有 <p> 元素中的第一個 <i> 元素

p > i:first-child {
    color: blue;
}

3. 匹配所有作為第一個子元素的 <p> 元素中的所有 <i> 元素

p:first-child i {
    color: lightgreen;
}

注意第二個例子的特殊用法吴旋。
?

# [CSS2] :last-child偽類

1. 匹配父元素中最后一個子元素<p>

p:last-child {
    color: aqua;
}

【提示】p:last-child 等同于 p:nth-last-child(1)

?

# [CSS3] :nth-child(an+b) 偽類 - 難點

【功能】選擇每個指定元素匹配父元素中的第an+b個子元素损肛，根據(jù)子元素索引選擇，具有bool結(jié)果性質(zhì)荣瑟，如果匹配不上則樣式表就不執(zhí)行

p:nth-child(2) {
    color: azure;
}

【分析】對于該點「菜鳥教程」的部分解讀有誤治拿，正確意思是：在 <p>元素所在的父元素的第二個子元素，如果是<p>元素笆焰，則加上樣式內(nèi)容劫谅，如果不是<p>元素，則跳過嚷掠。
【經(jīng)典案例】

1. 匹配下標(biāo)是奇數(shù)或偶數(shù)的子元素的關(guān)鍵詞（第一個子元素的下標(biāo)是 1）

p:nth-child(odd){
    background: aliceblue;
}
p:nth-child(even){
    background: antiquewhite;
}

2. 匹配下標(biāo)是 3 的倍數(shù)的所有 p 元素

p:nth-child(3){
    background: aquamarine;
}

?

# [CSS3] :nth-of-type(an+b) 偽類 - 難點

【功能】匹配指定元素所在父元素中相同類型的第n個同級兄弟元素捏检，根據(jù)類型選擇，同樣具有bool結(jié)果性質(zhì)

p:nth-of-type(2) {
    background: beige;
}

【分析】W3C的解釋還是很費解不皆，"屬于其父元素的第二個 p 元素的每個 p "贯城；我理解是：在<p>元素所在的不為<p>的父元素中，查找第二個<p>元素并為它加上樣式表霹娄，且只作用于p內(nèi)的行內(nèi)元素中
【特殊案例】為什么我覺得W3C的解釋不太合理能犯，注意如下這種情況：

<div>
    <p>line-1</p>
    <p>line-2<span>line-2-1</span>
          <P>line-2-2</P>
          <P>line-2-3</P>
          <div>line-2-4</div>
    </p>
    <div>line-3
        <p>line-3-1</p>
        <p>line-3-2</p>
        <p>line-3-3</p>
    </div>
    <p>line-4</p>
</div>

// css code
p:nth-of-type(2) {
    color:blueviolet;
}

來看看效果;

p:nth-of-type(2)的執(zhí)行結(jié)果

關(guān)于該例，仁者見仁犬耻，智者見智踩晶，只要能正確理解并應(yīng)用，一切你開心就好枕磁。
?

# [CSS3] :nth-last-child(an+b) 偽類

【功能】匹配指定元素的倒數(shù)第an+b個子元素
【案例】設(shè)置倒數(shù)第一個子元素的樣式渡蜻，比如去除底部邊框

p:nth-last-child(1) {
    border-bottom: none;
}

?

# [CSS3] :nth-last-of-type() 偽類

【案例】指定每個p元素匹配同類型中的倒數(shù)第2個同級兄弟元素背景色：

p:nth-last-of-type(2) {
    background:#ff0000;
}

?

# [CSS3] :not(seletor) 偽類

【功能】匹配所有不是指定標(biāo)簽的元素
【案例】設(shè)置不是p標(biāo)簽的元素的背景顏色

:not(p) {
    background-color: cadetblue;
}

?

# [CSS3] :empty 偽類

【功能】匹配所有沒有子元素的指定元素
【案例】設(shè)置所有沒有子元素的<p>元素的背景顏色為bisque

p:empty {
    background-color: bisque;
}

?

# [CSS2] :lang 偽類

【功能】匹配帶有指定 lang 屬性開始的元素
以下案例會給聲明了 lang 屬性且值為 no 的<q>元素內(nèi)容前后增加～符號。

q:lang(no) {
    quotes: "~" "~";
}

// html
<p>前面的文字 <q lang="no"> 段落中引用的文字</q></p>

?

CSS偽元素[Pseudo-elements]计济，用于向某些選擇器提供特殊效果

# 語法

偽元素的語法：seletor:pseudo-element { property: value; }
配合CSS類使用： selector.class:pseudo-element { property:value; }

# [CSS1] :first-line 偽元素

【功能】用于向文本的首行設(shè)置特殊樣式
【經(jīng)典案例】

p:first-line {
    color: #ff0000;
    font-variant: small-caps;  // 把文本設(shè)置成小型(文字比普通字體小)的大寫字體晴楔，可選值：normal/small-caps/inherit
}

【要點】:first-line只能用于塊級元素如<p>，<span>和<font>就不能用
【注釋】以下屬性能應(yīng)用于 :first-line：font/ color/ background/ word-space/ letter-spacing/ text-decoration/ vertical-align/ text-transform/ line-height/ clear(用于清除浮動)

# [CSS1] :first-letter 偽元素

【功能】用于向文本的首個字母添加特殊樣式

p:first-letter {
    color: #00ff00;
    font-size: xx-large;   // 還有這個值峭咒？見下方【拓展】
}

【要點】:first-letter也只能用于塊級元素如<p>税弃，<span>和<font>就不能用
【注釋】還有以下屬性能應(yīng)用與:first-letter: font/ color/ background/ margin/ padding/ border/ text-decoration/ vertical-align(僅float為none時)/ text-transform/ line-height/ float/ clear(用于清除浮動)
【拓展】font-size 的多種可能值

• <絕對大小>有：xx-small | x-small | small | medium | large | x-large | xx-large
• <相對大小>有：larger | smaller ?相對于父元素
• <長度> 如：16px;
• <百分比> 如：100%; ? 相對于父元素
  ?

# [CSS2] :before 偽元素

【功能】 :before 偽元素可以在元素的內(nèi)容前面插入新內(nèi)容
【案例】在<p>標(biāo)簽前面插入文字。默認(rèn)地凑队，這個偽元素是行內(nèi)元素则果，不過可以使用屬性 display 改變這一點。

p:before {
    content: '今日新聞：'
    background-color: chocolate;
}

如果想在元素上增加塊漩氨，設(shè)置content為空西壮，并增加樣式即可，例如制作loading效果時即可使用該方法叫惊。
?

# [CSS2] :after 偽元素

【功能】:after 偽元素可以在元素的內(nèi)容之后插入新內(nèi)容
【案例】下面的例子在每個 <h1> 元素后面插入一幅圖片款青，與:before 一致，這個偽元素也是行內(nèi)元素

h1:after {
    content:url(logo.gif);
}

# 后語

? 本文盡可能列出了平時用到的所有偽類和偽元素霍狰，當(dāng)然還有一些小眾偽類并未給予說明抡草，遇不到饰及，還難記，不如寫個簡單的類實現(xiàn)康震。另外燎含，如果本文有寫的不對的地方，歡迎大家指正交流腿短。