偽元素
能使用偽元素來選擇元素中的一些特殊位置
一、給段落定義樣式
- :first-letter 首字母（只能用於塊元素）
- :first-line 第一行
1、為p元素中的第一個字符設置顏色為黃色，字體為30px
p:first-letter{color:yellow;font-size:30px;}
<p>這是一個段落</p>
2、為p中的第一行設置背景顏色為綠色(多寫點)
p:first-line{background-color:green;}
二、元素前后部分
- :before 表示元素最前面的部分（緊隨着開始標簽的后面）
- :after 表示元素最后面的部分（緊挨着結束標簽的前面）
一般before和after都要結合content這個樣式一起使用，通過content向before或after的位置添加一些內容。
所添加的內容因為是通過css添加的所以無法選中這部分內容。
1、在p元素后面添加文字內容
p:after{content:"會出現在元素的最后面";color:blue;}
2、在p元素前面添加文字（使用偽類元素插入的內容“會出現在元素的最前面”這部分內容不可選中）
p:before{content:"會出現元素的最前面";color:orange;}
屬性選擇器
按屬性選擇元素，可以對具有給定屬性或屬性值的元素進行格式化，按屬性選擇要設置的 元素
語法結構：
No1、首先是選擇器（要考察其屬性的元素的選擇器）
No2、接着輸入屬性的名稱（元素要考察的屬性的名稱）
方括號[ ],包圍目標屬性和目標值。
No3、選擇相應的屬性選擇器，屬性選擇器有：
- [屬性名] 匹配具體的屬性，不問具體屬性值是什么
- [屬性名="value"] 屬性值符合條件的元素將被選中
- [屬性名~="value"] 屬性值包含這里的value的元素將被選中（屬性值還可以包含其他內容，不同的屬性值之間空隔分開）必須匹配完整的單詞，而不是單詞的一部分。
- [屬性名|="value"] (前面是管道符號|，不是1或字母L)，表示屬性值等於這里的value或是以value-開頭的元素將會被選中。不用輸入連字符
- [屬性名^="value"] 表示屬性值以這里的value開頭(作為完整的單詞，或單詞的一部分)的元素將被選中
- [屬性名$="value"] 表示屬性值這里以value結尾（作為完整的單詞，或單詞的一部分）的元素將被選中
- [屬性名*="value"] 表示屬性值至少包含這里的value一次的元素將被選中，value不必是屬性值中的完整單詞
實例：
1.選擇所有具有class屬性的段落p，設置其前景色為紅色
p[class]{color:red} <p class="b1">第一個段落</p> <p class="b2">第二個段落</p> <p>第三個段落</p>
2.選擇任何lang屬性值等於en（必須完全匹配）的p元素，設置前景色為紅色
p[lang="en"] {color:red} <p lang="en">第一個段落</p> <p>第二個段落</p> <p>第三個段落</p>
3、~=可以測試單詞的部分匹配，即匹配以空格相鄰的多個單詞中的一個(完整單詞)。選擇class屬性中屬性值中有boxone的article元素，並設置其背景顏色為黃色。
article[class~="boxone"] {background-color:yellow} <article class="boxone content">article</article> <article class="boxoone">center</article>
(1) *=選擇器可以匹配部分字符串（不需要完整的單詞）
article[class*="box"] {background-color:yellow} √
(2) 當寫成如下形式的時候，這個選擇器將無法匹配，因為box不是空格分隔的單詞列表中某個完整的單詞。
article[class~="box"] {background-color:yellow} ×
4、|=選擇任何帶有lang屬性且屬性值是以es開頭的h2，設置前景顏色為藍色。
h2[lang|="es"] {color:blue} <h2 lang="es">第一個二級標題</h2> <h2 lang="zh">第二個二級標題</h2>
5、可以通過聯合使用多種選擇器，選擇既有href屬性，又有任意屬性值包含單詞box的class屬性的a元素，設置背景顏色為橙色。
a[href][class~="box"] {background-color:orange} <a href="http://www.baidu.com">百度</a> <a href="#" class="box link">未鏈接</a> <a href="http://www.baidu.com" id="box">其他進入方式</a>
6、*=選擇器選擇所有既有href屬性，又有任意屬性包含are（作為完整單詞或單詞的一部分，如hare、dare。無論are出現在屬性值的什么位置）的title屬性的a元素。
a[href][title*="are"] {font-size:30px} <a href="#" title="百度are">百度</a> <a href="#" title="sinlangsre">新浪</a> <a href="#" title="wangyi">網易</a>
7、^=選擇器匹配任何href屬性以http://開頭(作為完整的單詞，或單詞的一部分)的a元素。
a[href^="http://"] {background-color:red} <a href="http://www.baidu.com">百度</a> <a href="#">新浪</a>
8、匹配任何src屬性完全等於logo.png的img元素。
img[src="wj1.png"] {border:1px solid green} <img src="wj.png">
9、選擇器的精確度比前一個低，匹配任何src屬性值以。png結尾的img元素。
img[src$=".png"] {border:1px solid green} <img src="wj.png"> <img src="1.jpg">