CSS3選擇器詳解

一、CSS3選擇器分類
1.基本選擇器
2.層次選擇器
3.僞類選擇器
1）動態僞類選擇器
2）目標僞類選擇器
3）語言僞類選擇器
4）UI元素狀態僞類選擇器
5）結構僞類選擇器
6）否定僞類選擇器
4.僞元素
5.屬性選擇器

二、基本選擇器語法

這裏着重說一下羣組選擇器（selector1,selector2,…,selectorN）,是將有相同樣式的元素分組在一起，每個選擇器之間用逗號隔開，表示規則中包含多個不同的選擇器，省去逗號的話就變成了後代選擇器。

三、層次選擇器語法

1.後代選擇器（E F）
也稱包含選擇器，作用是選擇元素E的所有後代元素F，F不管是E的子元素，孫輩元素，或更深層次關係，都被選中。
實例：
效果如圖：

代碼如下：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</title>
<style type="text/css"> 
*{margin:0;
padding:0;}
body{
    width:300px;
    margin:0 auto;
}
div{
    margin:5px;
    padding:5px;
    border:1px solid #ccc;
}
div div{
    background:orange;
}
</style>
</head>

<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4
    <div>5</div>
    <div>7</div>
</div>
<div>7
    <div>8
        <div>9
            <div>10</div>
        </div>
    </div>
</div>
</body>
</html>

2.子選擇器（E>F)
只能選擇某元素的子元素。
實例：
樣式表中增加一條：

body>div{
    background: green;
}

效果如圖：

3.相鄰兄弟選擇器（E+F）
效果如圖：

代碼如下：

<style type="text/css"> 
*{margin:0;
padding:0;}
body{
    width:300px;
    margin:0 auto;
}
div{
    margin:5px;
    padding:5px;
    border:1px solid #ccc;
}
div div{
    background:orange;
}
body>div{
    background: green;
}

.active + div{
    background:red;
}
</style>
</head>

<body>
<div class="active">1</div><!--爲了說明相鄰兄弟選擇器，在此處添加一類名active -->
<div>2</div>
<div>3</div>
<div>4
    <div>5</div>
    <div>7</div>
</div>
<div>7
    <div>8
        <div>9
            <div>10</div>
        </div>
    </div>
</div>
</body>

4、通用兄弟選擇器（E~F）
效果如圖：

添加如下樣式代碼：

.active ~ div{
    background:yellow;
}

三、僞類選擇器
1.動態僞類選擇器：
動態僞類並不存在與html中，只有當用戶和網站交互的時候才體現出來。
動態僞類包含兩種：一種是在鏈接中常看到的錨點僞類，
另一種是用戶行爲僞類。
詳細說明如下所示：

實戰：美化按鈕
效果如圖：正常，懸浮和點擊狀態的變化

代碼如下：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</title>
<style type="text/css"> 
.download-info{
    text-align:center;
}
/*默認狀態下按鈕效果*/
.btn{
    background-color:#0074cc;
    *background-color:#0055cc; /*css hack 寫法，用於特定瀏覽器識別*/
    /*CSS#漸變製作背景圖片*/
    background-image: -ms-linear-gradient(top;#0088cc,#0055cc);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#0088cc),to(#0055cc));
    background-image: -webkit-linear-gradient(top,#0088cc,#0055cc);
    background-image: -o-linear-gradient(top,#0088cc,#0055cc);
    background-image: -moz-linear-gradient(top,#0088cc,#0055cc);
    background-image: linear-gradient(top,#0088cc,#0055cc);
    background-repeat:repeat-x;
    display:inline-block;
    *display:inline;
    border:1px solid #cccccc;
    *border:0;
    border-color:#ccc;

    /*CSS3的色彩模塊*/
    border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    border-radius:6px;
    color:#ffffff;
    cursor:pointer;/*cursor規則是設定網頁瀏覽時用戶鼠標指針的樣式，也就是鼠標的圖形形狀*/
    font-size:20px;
    font-weight:normal;
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#0088cc',endColorstr='#0055cc',GradientType=0);/*這一句代碼是ie自帶濾鏡的漸變效果，漸變開始的顏色是#ffffff，結束的顏色是#ECE9D8，gradientType=0表示縱向淅變，如果把它改成1就是橫向漸變~~*/
    filter: progid:dximagetransform.microsoft.gradient(enable=false);
    line-height:normal;
    padding:14px 24px;
    text-align:center;

    /*CSS3文字陰影特性*/
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    text-decoration:none;
    vertical-align:middle;
    *zoom:1;/*css中的zoom的作用
1、檢查頁面的標籤是否閉合
不要小看這條，也許折騰了你兩天都沒有解決的 CSS BUG 問題，卻僅僅源於這裏。畢竟頁面的模板一般都是由開發來嵌套的，而他們很容易犯此類問題。
快捷提示：可以用 Dreamweaver 打開文件檢查，一般沒有閉合的標籤，會黃色背景高亮。

　　2、樣式排除法
有些複雜的頁面也許加載了 N 個外鏈 CSS 文件，那麼逐個刪除 CSS 文件，找到 BUG 觸發的具體 CSS 文件，縮小鎖定的範圍。

　　對於剛纔鎖定的問題 CSS 樣式文件，逐行刪除具體的樣式定義，定位到具體的觸發樣式定義，甚至是具體的觸發樣式屬性。

　　3、模塊確認法
有時候我們也可以從頁面的 HTML 元素出發。刪除頁面中不同的 HTML 模塊，尋找到觸發問題的 HTML 模塊。

　　4、檢查是否清除浮動
其實有不少的 CSS BUG 問題是因爲沒有清除浮動造成的。養成良好的清除浮動的習慣是必要的，推薦使用 無額外 HTML 標籤的清除浮動的方法（儘量避免使用 overflow:hidden;zoom:1 的類似方法來清除浮動，會有太多的限制性）。

　　5、檢查 IE 下是否觸發 haslayout
很多的 IE 下複雜 CSS BUG 都與 IE 特有的 haslayout 息息相關。熟悉和理解 haslayout 對於處理複雜的 CSS BUG 會事半功倍。推薦閱讀 old9 翻譯的 《On having layout》（如果無法翻越穿越偉大的 GFW，可閱讀 藍色上的轉帖 ）
快捷提示：如果觸發了 haslayout，IE 的調試工具 IE Developer Toolbar 中的屬性中將會顯示 haslayout 值爲 -1。

　　6、邊框背景調試法
故名思議就是給元素設置顯眼的邊框或者背景（一般黑色或紅色），進行調試。此方法是最常用的調試 CSS BUG 的方法之一，對於複雜 BUG 依舊適用。經濟實惠還環保^^
最後想強調一點的是，養成良好的書寫習慣，減少額外標籤，儘量語義，符合標準，其實可以爲我們減少很多額外的複雜 CSS BUG，更多的時候其實是我們自己給自己製造了麻煩*/

}

/*懸浮狀態下按鈕效果*/
.btn:hover{
    background-position: 0 -15px;
    background-color: #0055cc;
    *background-color:#004ab3;
    color:#ffffff;
    text-decoration:none;/*這個屬性允許對文本設置某種效果，如加下劃線。*/
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);

    /*css3動畫效果*/
    -webkit-transition: background-position 0.1s linear;
    -moz-transition: background-position 0.1s linear;
    -ms-transition: background-position 0.1s linear;
    -o-transition: background-position 0.1s linear;
    transition: background-position 0.1s linear;
}

/*點擊時效果*/
.btn:active{
    background-color: #0055cc;
    *background-color: #004ab3;
    background-color:#004099 \9;
    background-image: none;
    outline:0;/*outline （輪廓）是繪製於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的作用*/
    /*盒子陰影特性*/
    box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.15);
    color:rgba(255, 255, 255, 0.75);
}

/*獲得焦點按鈕效果*/
.btn:focus{
    outline:thin dotted #333;
    outline:5px auto -webkit-focus-ring-color;/*作用使得外邊框發光*/
    outline-offset: -2px;/*outline-offset 屬性對輪廓進行偏移，並在邊框邊緣進行繪製*/
}


</style>
</head>

<body>
<div class="download-info"><a href="#" class="btn">View project on GitHub</a></div>
</body>
</html>

這裏有有關於css hack 寫法的詳細說明。

2.目標僞類：
語法：

實戰：手風琴效果：
這裏是詳細介紹。

3.語言僞類選擇器：
根據元素的語言編碼匹配元素。這種語言信息必須包含在文檔中，或與文檔關聯，不能從CSS指定。爲文檔指定語言，有兩種方法可以表示：

<!DOCTYPE HTML>
<html lang="en-US">

另一種方法是手工在文檔中指定lang屬性，並設置對應的語言值：

<body lang="fr">

在Twitter上有對不同語言的處理，一下代碼片段是來自https://twitter.com/的一段對於不同語言處理的代碼:

<ul id="supported_languages">
            <li><a href="?lang=zh-tw" data-lang-code="zh-tw" title="繁體中文" class="js-language-link js-tooltip">繁體中文</a></li>
            <li><a href="?lang=ja" data-lang-code="ja" title="日文" class="js-language-link js-tooltip">日本語</a></li>
            <li><a href="?lang=id" data-lang-code="id" title="印度尼西亞文" class="js-language-link js-tooltip">Bahasa Indonesia</a></li>
            <li><a href="?lang=msa" data-lang-code="msa" title="馬來文" class="js-language-link js-tooltip">Bahasa Melayu</a></li>
            <li><a href="?lang=cs" data-lang-code="cs" title="捷克文" class="js-language-link js-tooltip">Čeština</a></li>
            <li><a href="?lang=da" data-lang-code="da" title="丹麥文" class="js-language-link js-tooltip">Dansk</a></li>
            <li><a href="?lang=de" data-lang-code="de" title="德文" class="js-language-link js-tooltip">Deutsch</a></li>
            <li><a href="?lang=en" data-lang-code="en" title="英文" class="js-language-link js-tooltip">English</a></li>
            <li><a href="?lang=en-gb" data-lang-code="en-gb" title="英式英文" class="js-language-link js-tooltip">English UK</a></li>
            <li><a href="?lang=es" data-lang-code="es" title="西班牙文" class="js-language-link js-tooltip">Español</a></li>
            <li><a href="?lang=fil" data-lang-code="fil" title="菲律賓文" class="js-language-link js-tooltip">Filipino</a></li>
            <li><a href="?lang=fr" data-lang-code="fr" title="法文" class="js-language-link js-tooltip">Français</a></li>
            <li><a href="?lang=it" data-lang-code="it" title="意大利文" class="js-language-link js-tooltip">Italiano</a></li>
            <li><a href="?lang=hu" data-lang-code="hu" title="匈牙利文" class="js-language-link js-tooltip">Magyar</a></li>
            <li><a href="?lang=nl" data-lang-code="nl" title="荷蘭文" class="js-language-link js-tooltip">Nederlands</a></li>
            <li><a href="?lang=no" data-lang-code="no" title="挪威文" class="js-language-link js-tooltip">Norsk</a></li>
            <li><a href="?lang=pl" data-lang-code="pl" title="波蘭文" class="js-language-link js-tooltip">Polski</a></li>
            <li><a href="?lang=pt" data-lang-code="pt" title="葡萄牙文" class="js-language-link js-tooltip">Português</a></li>
            <li><a href="?lang=ro" data-lang-code="ro" title="羅馬尼亞文" class="js-language-link js-tooltip">Română</a></li>
            <li><a href="?lang=fi" data-lang-code="fi" title="芬蘭文" class="js-language-link js-tooltip">Suomi</a></li>
            <li><a href="?lang=sv" data-lang-code="sv" title="瑞典文" class="js-language-link js-tooltip">Svenska</a></li>
            <li><a href="?lang=vi" data-lang-code="vi" title="越南文" class="js-language-link js-tooltip">Tiếng Việt</a></li>
            <li><a href="?lang=tr" data-lang-code="tr" title="土耳其文" class="js-language-link js-tooltip">Türkçe</a></li>
            <li><a href="?lang=el" data-lang-code="el" title="希臘文" class="js-language-link js-tooltip">Ελληνικά</a></li>
            <li><a href="?lang=ru" data-lang-code="ru" title="俄文" class="js-language-link js-tooltip">Русский</a></li>
            <li><a href="?lang=uk" data-lang-code="uk" title="烏克蘭文" class="js-language-link js-tooltip">Українська мова</a></li>
            <li><a href="?lang=he" data-lang-code="he" title="希伯來文" class="js-language-link js-tooltip">עִבְרִית</a></li>
            <li><a href="?lang=ar" data-lang-code="ar" title="阿拉伯文" class="js-language-link js-tooltip">العربية</a></li>
            <li><a href="?lang=fa" data-lang-code="fa" title="波斯文" class="js-language-link js-tooltip">فارسی</a></li>
            <li><a href="?lang=mr" data-lang-code="mr" title="馬拉地文" class="js-language-link js-tooltip">मराठी</a></li>
            <li><a href="?lang=hi" data-lang-code="hi" title="印地文" class="js-language-link js-tooltip">हिन्दी</a></li>
            <li><a href="?lang=bn" data-lang-code="bn" title="孟加拉文" class="js-language-link js-tooltip">বাংলা</a></li>
            <li><a href="?lang=gu" data-lang-code="gu" title="古吉拉特文" class="js-language-link js-tooltip">ગુજરાતી</a></li>
            <li><a href="?lang=ta" data-lang-code="ta" title="泰米爾文" class="js-language-link js-tooltip">தமிழ்</a></li>
            <li><a href="?lang=kn" data-lang-code="kn" title="卡納達文" class="js-language-link js-tooltip">ಕನ್ನಡ</a></li>
            <li><a href="?lang=th" data-lang-code="th" title="泰文" class="js-language-link js-tooltip">ภาษาไทย</a></li>
            <li><a href="?lang=ko" data-lang-code="ko" title="韓文" class="js-language-link js-tooltip">한국어</a></li>
        </ul>

4.UI元素狀態僞類選擇器
主要用於form表單元素上，以提高網頁人機交互，操作邏輯以及頁面整體美觀
UI元素狀態一般包括：啓用、禁用、選中、未選中、獲得焦點、失去焦點、鎖定和待機等。如表單中文本輸入框，html元素選中和未選中狀態，這幾種狀態是CSS3種常用狀態僞類選擇器；詳細語法如下：

對於IE6~8使用UI元素僞類選擇器需要使用特別的方法處理。
使用js庫，選用內置已兼容UI元素僞類選擇器的js庫或框架，任何在代碼中引入它們並完成想要的效果，由Keith Clark 編寫的Selectivizr腳本是一個不錯的選擇。先將該腳本引入頁面中，再從7個js庫選擇一個引入，UI狀態僞類選擇器就能工作在IE上了。
除使用js庫外，還可用用原始的做法，使用類名處理，即給元素設置class屬性處理，例如禁用按鈕效果，可用在HTML元素添加class=“disable”,然後爲此添加樣式。

<style type=text/css>
.btn.disabled, /*等效於.btn:disabled，用於兼容IE低版本瀏覽器*/
.btn:disabled{
        ...
    }
</style>

5.結構僞類選擇器
有4個僞類選擇器接受參數n

:nth-child(n)
:nth-last-child(n)
:nth-of-type(n)
:nth-last-of-type(n)
參數n可用是正數（1、2、3、4）、關鍵字（odd、even）,還可以是公式（2n+1、-n+5）,參數n起始值始終是1，而不是0。當參數n 爲0時，選擇器將匹配不到任何元素。

4.1 :first-child
4.2 :last-child
4.3.1 :nth-child()
如：ul>li:nth-child(3) 如果第三個子院不是li,則沒有任何元素被選中；
4.3.2 :nth-child(n) 參數n是一個簡單的表達式，取值從0開始計算的，到什麼時候結束不知道，如果在實際應用中直接這樣使用，將會選中父元素中所有子元素。
ul>li:nth-child(3){ background-color：orange；}
4.4 ：nth-last-child
從父元素最後一個子元素開始計算選擇特定元素
4.5 ：nth-of-type
只計算父元素中指定某類型子元素。

在web應用中”:nth-of-type”在以下場景中可以使用。
- 營造一種有隨意感的界面，如改變每張圖片的旋轉角度；
- 使文章中的圖片交替向左向右浮動；
- 爲一篇文章的頭一段設置不同的樣式，如首字下沉；
- 爲一個定義列表的條上使用交替樣式；
- 製作圖表。
4.6 ：only-child的使用
表示一個元素是它父元素的唯一子元素
4.7 ：only-of-type的使用
選擇一個元素是它父元素唯一一個相同類型的子元素。
4.8 ：empty的使用
選擇沒有任何內容的元素，哪怕是一個空格。這個選擇器用例處理動態輸出內容非常方便。例如想高粱提示出用戶搜索出來的結果爲空時：

#results:empty{background-color:#fcc;}

實戰代碼如下：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</title>
<style type="text/css"> 
*{
    margin:0;
    padding:0;
}

ul{
margin:50px auto;
width:400px;
list-style:none outside none;
}
li{
    display:inline-block;
    margin:5px;
    padding:5px;
    width:50px;
    height:50px;
    font:bold 30px/50px arial;
    background:#000;
    color:#fff;
    border-radius:50px;
    text-align:center;
}
ul>li:first-child{
    background-color: green;
}
ul>li:nth-child(3){
    background-color:yellowgreen;
}
/*ul>li:nth-child(n){
    background-color:orange;
}*/
/*ul>li:nth-child(2n){ //選中偶數
    background-color:orange;
}*/
/*ul>li:nth-child(even){
    background-color:orange;
}*/
/*ul>li:nth-child(n+5){
    background-color:blue;
}*/
ul>li:nth-last-child(4){/*從後數第四個*/
    background-color:blue;
}
ul>li:nth-child(odd){

    /*選中的是奇數項*/
}

ul>li:nth-last-child(even){
    /*選中的也是偶數*/
}


</style>
</head>

<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>

</ul>
</body>
</html>

6.否定僞類選擇器
主要用來定位不匹配該選擇器的元素。
實例效果如圖：

代碼：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</title>
<style type="text/css"> 
*{
    margin:0;
    padding:0;
}

ul{
    width:690px;
    margin:20px auto;
    letter-spacing:-4px;/*letter-spacing 屬性增加或減少字符間的空白（字符間距）*/
    word-spacing:-4px;/*word-spacing 屬性增加或減少單詞間的空白（即字間隔）*/
    font-size:0;
}

li{
    font-size:16px;
    letter-spacing:normal;
    word-spacing:normal;
    display:inline-block;
    *display:inline;
    zoom: 1; 
    list-style:none outside none;/*http://www.w3school.com.cn/cssref/pr_list-style.asp*/
    margin:5px;
}

img{
    width:128px;
    height:128px;
}
.gallery li:nth-child(2){
    -webkit-filter: grayscale(1);
}
.gallery li:nth-child(3){
    -webkit-filter:sepia(1) ;
}
.gallery li:nth-child(4){
    -webkit-filter:saturate(0.5) ;
}
.gallery li:nth-child(5){
    -webkit-filter:hue-rotate(90deg);
}
.gallery li:nth-child(6){
    -webkit-filter: invert(1);
}
.gallery li:nth-child(7){
    -webkit-filter: opacity(0.2);
}
.gallery li:nth-child(8){
    -webkit-filter: blur(3px);
}
.gallery li:nth-child(9){
    -webkit-filter: drop-shadow(5px 5px 5px  #ccc);
}
.gallery li:nth-child(10){
    -webkit-filter: saturate(6) hue-rotate(361deg) brightness(.09);
}
.gallery:hover li:not(:hover){
    -webkit-filter: blur(20px) grayscale(1);
    opacity:.7;
}
</style>
</head>



<body>
<ul class="gallery">

    <li><img src="http://www.w3cplus.com/sites/default/files/filter.jpg" alt=""></li>

    <li><img src="http://www.w3cplus.com/sites/default/files/filter.jpg" alt=""></li>
    <li><img src="http://www.w3cplus.com/sites/default/files/filter.jpg" alt=""></li>
    <li><img src="http://www.w3cplus.com/sites/default/files/filter.jpg" alt=""></li>
    <li><img src="http://www.w3cplus.com/sites/default/files/filter.jpg" alt=""></li>

    <li><img src="http://www.w3cplus.com/sites/default/files/filter.jpg" alt=""></li>

    <li><img src="http://www.w3cplus.com/sites/default/files/filter.jpg" alt=""></li>
    <li><img src="http://www.w3cplus.com/sites/default/files/filter.jpg" alt=""></li>
    <li><img src="http://www.w3cplus.com/sites/default/files/filter.jpg" alt=""></li>
    <li><img src="http://www.w3cplus.com/sites/default/files/filter.jpg" alt=""></li>

</ul>

</body>
</html>

四、僞元素
除了僞類，CSS3還支持訪問僞元素。
僞元素可用於定位文檔中包含的文本，但無法在文檔樹種定位。僞類一般反映無法在CSS中輕鬆或可靠的檢測到某個元素屬性或狀態；僞元素表示DOM外部的某種文檔結構。
僞元素在CSS一直存在，如:first-line、:first-letter、:before、:after。CSS3對僞元素做了調整——多加了一個冒號，即變爲::first-line、::first-letter、::before、::after,增加了一個::selection。
對於IE6~8僅支持單冒號，現代瀏覽器同時支持這兩種表示法。另外一個區別是，雙冒號和單冒號在CSS3中用來區分僞類與僞元素。

1.::first-letter
用來選擇文本塊的第一個字母，通常用於給文本元素添加排版細節，如下沉字母或首字母。
實例：

效果如圖：

代碼：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css"> 
p:first-child::first-letter{
    float:left;
    color:#903;
    padding:4px 8px 0 3px;
    font:75px/60px Georgia;
}


</style>
</head>

<body>
<p> Pellentesque habitant morbi tristique senectus et netus malesuada fames acturpis
egestas. Vestibulum tortor quam, feugiat vitae,ultricies eget,tempor sitamet,ante.Donec eu
libero sit amet quam egestasseper.Aenean ultricies mi vitac est.Mauris placerat elsifend leo. </p>
</body>
</html>

2.僞元素::first-line
用於匹配元素第一行文本，可應用一些特殊樣式，給文本添加一些細微區別。匹配block、inline-block、table-caption、table-cell等級別元素第一行。
實例：效果如圖：

代碼：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css"> 
p:first-child::first-line{
    font:italic 16px/18px Georgia;
    color:#903;
}


</style>
</head>

<body>
<p> Pellentesque habitant morbi tristique senectus et netus malesuada fames acturpis
egestas. Vestibulum tortor quam, feugiat vitae,ultricies eget,tempor sitamet,ante.Donec eu
libero sit amet quam egestasseper.Aenean ultricies mi vitac est.Mauris placerat elsifend leo. </p>
</body>
</html>

3.僞元素::before和::after
不是指存在於標記中的內容，而是可以插入額外內容的位置，儘管生成的內容不會成爲DOM的一部分，但同樣可以設置樣式。
要爲僞元素生成內容，需要配合content屬性。例如，假設在頁面上所有外部鏈接之後的括號中附加它們指向的URL，無需將URL硬編碼到標記中，可結合使用一個屬性選擇器和::after僞元素。

a[herf^=http]::after{
    content:"("attr(herf)")";
}

如今在CSS3 中使用這兩個僞元素越來越多見，例如給鏈接添加ICON的效果。
4.僞元素::selection
用來匹配突出顯示的文本，默認網站文本是深藍的背景，白色的字體。
有的設計需要一個與衆不同的效果，此時這個僞元素就非常實用，不過IE系列僅IE-9支持，Firefox需要加上私有屬性-moz。webkit內核瀏覽器都支持。
僞元素::selection僅接受兩個屬性，一個是blackground,另一個是color。
默認樣式：

修改的樣式：

代碼：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css"> 
::selection{
    background:red;
    color:#fff;
}

::-moz-selection{
    background:red;
    color:#fff;
}
</style>
</head>

<body>
<p> Pellentesque habitant morbi tristique senectus et netus malesuada fames acturpis
egestas. Vestibulum tortor quam, feugiat vitae,ultricies eget,tempor sitamet,ante.Donec eu
libero sit amet quam egestasseper.Aenean ultricies mi vitac est.Mauris placerat elsifend leo. </p>
</body>
</html>

五、屬性選擇器
CSS3新增了3個屬性選擇器，可以對標籤進行過濾，更容易定位HTML標籤。
下面是CSS3的屬性列表。

CSS3遵循了慣用的編碼規則，通配符的使用提高樣式表的書寫效率
常見通配符如下：

屬性選擇器方法詳解

創建簡單的HTML結構，設置默認樣式：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css"> 
.demo{
    width:300px;
    border:1px solid #ccc;
    padding:10px;
    overflow:hidden;
    margin:20px auto;
}
.demo a{

    float:left;
    display:block;
    height:50px;
    width:50px;
    border-radius:10px;
    text-align:center;
    background:#aac;
    color:blue;
    font:bold 20px/50px Arial;
    margin-right:5px;
    text-decoration:none;
    margin:5px;
}

</style>
</head>

<body>
<div class="demo">
    <a href="http://www.w3cplus.com" target="_blank" class="links item first" id="first" title="w3cplus">1</a>
    <a href="" class="links active item" title="test website" target="_blank" lang="zh" >2</a>
    <a href="sites/file/test.html" class="links item" title="this is a link" lang="zh-cn">3</a>
    <a href="sites/file/test.png" class="links item" target="_blank" lang="zh-tw">4</a>
    <a href="sites/file/image.jpg" class="links item" title="zh-cn">5</a>
    <a href="mailto:w3cplus@hotmail" class="links item" title="website link" lang="zh">6</a>
    <a href="/a.pdf" class="links item" title="open the website" lang="cn">7</a>
    <a href="/abc.pdf" class="links item" title="close the website" lang="en-zh">8</a>
    <a href="abcdef.doc" class="links item" title="http://www.sina.com">9</a>
    <a href="abd.doc" class="linksitem last" id="last">10</a>


</div>
</body>
</html>

默認樣式如圖：

1.E[attr]
選擇有某個屬性的元素，而不管這個屬性的值是什麼。
效果如圖：

也可以使用多屬性進行選擇元素：

a[id][title]{ background-color:red; }

2.E[attr=val]
選擇元素E設置了屬性attr,並且屬性值爲val,進一步精確需要選擇的元素。
效果如圖：

注意：此選擇器中，屬性和屬性值必須完全匹配，特別對於屬性值是詞列表的形式，例如：

<a href="#" class="links item"></a>

其中a[class=”links”]{….}是找不到匹配元素，a[class=”links item”]{….}才匹配。

3.E[attr|=val]
選擇attr屬性值等於val或以val-開頭的所有字符串屬性元素。
效果如圖：

代碼：

a[lang|=zh]{background-color:hotpink;}

4.E[attr~=val]
匹配元素某個屬性有一個或多個屬性值。
效果如圖：

代碼：

a[title~=website]{background-color:goldenrod;}

5.E[attr*=val]
只要所選擇的屬性中有val字符，都將被匹配。與E[attr~=val]不同之處是：如
a[title~=links]屬性值中links是一個單詞，而a[title*=links]中links不一定是一個單詞，如上面實例可以是“linksitem”。

效果如圖：

代碼：

a[class*=links]{background-color:greenyellow;}

6.E[attr^=val]
匹配以”val”開頭的所有元素

效果如圖：

代碼：

a[href^=http]{background-color:yellowgreen;}

7.E[attr$=val]
匹配以”val”結尾的所有元素。
效果如圖：

代碼：

a[href$=png]{background-color:lavender;}

CSS3選擇器詳解

《Python進階》學習筆記

Leetcode 3161. 物塊放置查詢

leetcode 60 排列序列

一個docker容器暴露多個端口

微服務實踐之使用 Visual Studio 2022 調試Dapr 應用程序

wpf附加屬性理解 WPF附加屬性

TCP連接通信過程及網絡管理

H5新春賀卡之筆記

數據庫管理視圖:查看視圖定義

初識Linux-系統安裝，系統信息查看，馬哥初印象

文本編輯器專輯之—Vim

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結