##2.9 否定偽類選擇器
否定偽類選擇器`":not()"`是CSS3的新選擇器，類似jQuery中的`":not()"`選擇器，主要是用來定位不匹配該選擇器的元素。
###2.9.1 否定偽類選擇器語法
| 選擇器 | 功能描述 |
| --- | --- |
| `E:not(F)` | 匹配所有除元素F外的E元素 |
###2.9.2 瀏覽器兼容性
> IE9及以上瀏覽器支持，主流瀏覽器支持。
###2.9.3 實戰體驗：改變圖片效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:not 選擇器使用</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
width: 690px;
margin: 20px auto;
letter-spacing: -4px;
word-spacing: -4px;
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;
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(0.09);
}
.gallery:hover li:not(:hover){
-webkit-filter:blur(2px) grayscale(1);
opacity: 0.7;
}
</style>
</head>
<body>
<ul class="gallery">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
##2.10 偽元素
除了偽類，CSS3還支持訪問偽元素。偽元素可用于定位文檔中包含的文本，但無法再文檔樹中定位。偽類一般反映無法再CSS中輕松或可靠地檢測到的某個元素屬性或狀態；另一方面，偽元素表示DOM外部的某種文檔結構。
###2.10.1 偽元素`:first-letter`
“`:first-letter`”用來選擇文本塊的第一個字母，除非在同一行中包含一些其他元素。“`:first-letter`”通常用來給文本元素添加排版細節。
`<p>China’s annual salary guide, divided into upper, middle and lower levels, sets the rate at which enterprises must raise employee salaries.</p>`
p:first-letter{
float: left;
color: red;
padding: 4px 8px 0 3px;
font: 75px/60px Georgia;
}
###2.10.3 偽元素`::before`和`::after`
> 通常配合`content`屬性一起使用。
###2.10.4 偽元素`::selection`
“`::selection`”是用來匹配突出顯示的文本。瀏覽器默認情況下，選擇網站文本是深藍色背景，白色字體。（IE9及以上瀏覽器支持）如下所示：
::selection{
background: red;
color: #fff;
}
::-moz-selection{
background: red;
color: #fff;
}
##2.11 屬性選擇器
在HTML中，通過各種各樣的屬性可以給元素增加很多附加的信息。例如，通過id屬性可以將不同DIV元素進行區分。CSS2中引入了一些屬性選擇器，這些選擇器可基于元素的屬性來匹配元素，而CSS3在CSS2的基礎上擴展了這些屬性選擇器，支持基于模式匹配來定位元素。
###2.11.1 屬性選擇器語法
| 選擇器 | 功能描述 |
| --- | --- |
| `E[attr]` | 選擇匹配具有屬性attr的E元素。其中E可以省略，表示選擇定義了attr屬性的任意類型元素 |
| `E[attr=val]` | 選擇匹配具有屬性attr的E元素，并且attr的屬性值為val（其中val區分大小寫），同樣它的元素省略時標識選擇頂一個attr屬性值偽val的任意類型元素 |
| <code>E[attr|=val]</code> | 選擇匹配E元素，且E元素定義了屬性attr,attr屬性值時一個具有val或者以val開始的屬性值。 |
| `E[attr~=val]` | 選擇匹配E元素，且E元素定義了屬性attr,attr屬性值具有多個空格分割的值，其中一個值等于val。 |
| `E[attr*=val]` | 選擇匹配元素E，且E元素定義了屬性attr,其屬性值任意位置包含了val。 |
| `E[attr^=val]` | 選擇匹配元素E，且E元素定義了屬性attr,其屬性值以val開頭的任何字符串。 |
| `E[attr$=val]` | 選擇匹配元素E，且E元素定義了屬性attr，其屬性值以val結尾的任何字符串。 |
**CSS3中常見的通配符**
| 通配符 | 功能描述 | 示例 |
|---|---|---|
| `^` | 匹配起始符 | `span[class^=span]`表示選擇以類名以“span”開頭的所有span元素 |
| `$` | 匹配終止符 | `a[href$=pdf]`表示選擇以“pdf”結尾的href屬性的所有a元素 |
| `*` | 匹配任意字符 | `a[title*=site]`匹配a元素，而且a元素的title屬性值中任意位置有“site”字符的任何字符串。 |
###2.11.2 瀏覽器兼容性
主流瀏覽器全部支持，IE7及以上瀏覽器支持。
###2.11.3 屬性選擇器的使用方法詳解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3屬性選擇器的使用</title>
<style>
.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/test.jpg" class="links item" title="zh-cn">5</a>
<a href="milto: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 ths 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]{background-color: yellow;}
![E[attr]屬性選擇器的效果](http://upload-images.jianshu.io/upload_images/1875545-b4c95f20f79ac22a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
#####2. `E[attr=val]`屬性選擇器
a[id=first]{background-color: red;}
![E[attr=val]屬性選擇器的效果](http://upload-images.jianshu.io/upload_images/1875545-c77c3721f228599b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
#####3. `E[attr|=val]`屬性選擇器
a[lang|=zh]{background-color: yellow;}
![E[attr|=val]屬性選擇器的效果](http://upload-images.jianshu.io/upload_images/1875545-310c9e5773a0ec6f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
#####4. `E[attr~=val]`屬性選擇器
a[title~=website]{background-color: yellow;}
![E[attr~=val]屬性選擇器的效果](http://upload-images.jianshu.io/upload_images/1875545-91c66be3edb239e0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
#####5. `E[attr*=val]`屬性選擇器
a[calss*=links]{background-color: yellow;}
![E[attr*=val]屬性選擇器的效果](http://upload-images.jianshu.io/upload_images/1875545-bb79af70fb9b399e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
#####6. `E[attr^=val]`屬性選擇器
a[href^=http]{background-color: yellow;}
![E[attr^=val]屬性選擇器的效果](http://upload-images.jianshu.io/upload_images/1875545-92f79e4a89c76239.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
#####7. `E[attr$=val]`屬性選擇器
a[href$=png]{background-color: yellow;}
![E[attr$=val]屬性選擇器的效果](http://upload-images.jianshu.io/upload_images/1875545-7a85854198195533.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
###2.11.4 實戰體驗：創建個性化鏈接樣式
略（p81-p84） 太長了`/(ㄒoㄒ)/~~`
##2.12 本章小結
本章主要向大家介紹了CSS3核心部分中的選擇器。首先介紹CSS3選擇器的優勢，然后分別詳細介紹了基本選擇器、層次選擇器、偽類選擇器、屬性選擇器。
