CSS3簡明教程之征服CSS3選擇器

第6章征服CSS3選擇器

屬性選擇器

在HTML中，通過各種各樣的屬性可以給元素增加很多附加的信息纷妆。例如扫外，通過id屬性可以將不同div元素進(jìn)行區(qū)分辑奈。

在CSS2中引入了一些屬性選擇器，而CSS3在CSS2的基礎(chǔ)上對屬性選擇器進(jìn)行了擴(kuò)展之宿，新增了3個屬性選擇器族操，使得屬性選擇器有了通配符的概念，這三個屬性選擇器與CSS2的屬性選擇器共同構(gòu)成了CSS功能強(qiáng)大的屬性選擇器比被。如下表所示：

屬性選擇器	功能描述
E[att^='val']	選擇匹配元素E色难，且E元素定義了屬性att，其屬性值以val開頭的任何字符串
E[att$='val']	選擇匹配元素E等缀，且E元素定義了屬性att枷莉，其屬性值以val結(jié)尾的任何字符串
E[att*='val']	選擇匹配元素E,且E元素定義了屬性att，其屬性值的任意位置包含了val

示例：

<a href="xxx.pdf">我鏈接的是PDF文件</a>
<a href="#" class="icon">我類名是icon</a>
<a href="#" title="我的title是more">我的title是more</a>

a[class^=icon]{
  background: green;
  color:#fff;
}
a[href$=pdf]{
  background: orange;
  color: #fff;
}
a[title*=more]{
  background: blue;
  color: #fff;
}

結(jié)構(gòu)性偽類選擇器 root

:root選擇器尺迂，從字面上我們就可以很清楚的理解是根選擇器笤妙，他的意思就是匹配元素E所在文檔的根元素。在HTML文檔中噪裕，根元素始終是<html>

通過“:root”選擇器設(shè)置背景顏色

:root {
  background:orange;
}

結(jié)構(gòu)性偽類選擇器 not

:not選擇器稱為否定選擇器危喉，和jQuery中的:not選擇器一模一樣蔗彤，可以選擇除某個元素之外的所有元素凸郑。就拿form元素來說，比如說你想給表單中除submit按鈕之外的input元素添加紅色邊框

form {
  width: 200px;
  margin: 20px auto;
}
div {
  margin-bottom: 20px;
}
input:not([type="submit"]){
  border:1px solid red;
}

結(jié)構(gòu)性偽類選擇器 empty

:empty選擇器表示的就是空穷吮。用來選擇沒有任何內(nèi)容的元素严蓖，這里沒有內(nèi)容指的是一點(diǎn)內(nèi)容都沒有薄嫡，哪怕是一個空格

比如說氧急，你的文檔中有三個段落p元素，你想把沒有任何內(nèi)容的P元素隱藏起來毫深。我們就可以使用:empty選擇器來控制

p{
 background: orange;
 min-height: 30px;
}
p:empty {
  display: none;
}?

結(jié)構(gòu)性偽類選擇器 target

:target選擇器稱為目標(biāo)選擇器吩坝，用來匹配文檔(頁面)的url的某個標(biāo)志符的目標(biāo)元素

點(diǎn)擊鏈接顯示隱藏的段落

html代碼：

<h2><a href="#brand">Brand</a></h2>
<div class="menuSection" id="brand">
    content for Brand
</div>

css代碼：

.menuSection{
  display: none;
}
:target{  /*這里的:target就是指id="brand"的div對象*/
  display:block;
}

分析：

具體來說，觸發(fā)元素的URL中的標(biāo)志符通常會包含一個#號哑蔫，后面帶有一個標(biāo)志符名稱钉寝，上面代碼中是：#brand
:target就是用來匹配id為brand的元素（id="brand"的元素）,上面代碼中是那個div元素。

多個url(多個target)的處理：

同一個頁面上有很多的url的時候你可以取不同的名字闸迷，只要#號后對的名稱與id=""中的名稱對應(yīng)就可以了

html代碼：

<h2><a href="#brand">Brand</a></h2>
<div class="menuSection" id="brand">
  content for Brand
</div>
<h2><a href="#jake">Brand</a></h2>
<div class="menuSection" id="jake">
  content for jake
</div>
<h2><a href="#aron">Brand</a></h2>
<div class="menuSection" id="aron">
   content for aron
</div>

CSS代碼：

#brand:target {
  background: orange;
  color: #fff;
}
#jake:target {
  background: blue;
  color: #fff;
}
#aron:target {
  background: red;
  color: #fff;
}

結(jié)構(gòu)性偽類選擇器 first-child

:first-child選擇器表示的是選擇父元素的第一個子元素的元素E

示例演示:

通過:first-child選擇器定位列表中的第一個列表項(xiàng)嵌纲，并將序列號顏色變?yōu)榧t色。

html代碼：

<ol>
 <li><a href="##">Link1</a></li>
 <li><a href="##">Link2</a></li>
 <li><a href="##">link3</a></li>
</ol>

CSS代碼：

ol > li{
  font-size:20px;
  font-weight: bold;
  margin-bottom: 10px;
}

ol a {
  font-size: 16px;
  font-weight: normal;
}

ol > li:first-child{
  color: red;
}

結(jié)構(gòu)性偽類選擇器 last-child

:last-child選擇器選擇的是元素的最后一個子元素

html代碼：

<div class="post">
 <p>第一段落</p>
 <p>第二段落</p>
 <p>第三段落</p>
 <p>第四段落</p>
 <p>第五段落</p>
</div>?

CSS代碼：

.post {
  padding: 10px;
  border: 1px solid #ccc;
  width: 200px;
  margin: 20px auto;
}
.post p {
  margin:0 0 15px 0;
}

.post p:last-child {
  margin-bottom:0;
}

結(jié)構(gòu)性偽類選擇器 nth-child(n)

:nth-child(n)選擇器用來定位某個父元素的一個或多個特定的子元素腥沽。其中n是其參數(shù)逮走，而且可以是整數(shù)值(1,2,3,4)，也可以是表達(dá)式(2n+1今阳、-n+5)和關(guān)鍵詞(odd师溅、even)，但參數(shù)n的起始值始終是1盾舌，而不是0墓臭。也就是說，參數(shù)n的值為0時妖谴，選擇器將選擇不到任何匹配的元素起便。

html代碼：

<ol>
 <li>item1</li>
 <li>item2</li>
 <li>item3</li>
 <li>item4</li>
 <li>item5</li>
 <li>item6</li>
 <li>item7</li>
 <li>item8</li>
 <li>item9</li>
 <li>item10</li>
</ol>?

CSS代碼：

ol > li:nth-child(2n){
  //將偶數(shù)行列表背景色設(shè)置為橙色
  background: orange;
}

結(jié)構(gòu)性偽類選擇器 nth-last-child(n)

:nth-last-child(n)選擇器和前面的:nth-child(n)選擇器非常的相似，只是這里多了一個last窖维，所起的作用和:nth-child(n)選擇器有所區(qū)別榆综，從某父元素的最后一個子元素開始計(jì)算，來選擇特定的元素铸史。

html代碼：

<ol>
 <li>item1</li>
 <li>item2</li>
 <li>item3</li>
 <li>item4</li>
 <li>item5</li>
 <li>item6</li>
 <li>item7</li>
 <li>item8</li>
 <li>item9</li>
 <li>item10</li>
 <li>item11</li>
 <li>item12</li>
 <li>item13</li>
 <li>item14</li>
 <li>item15</li>
</ol>?

CSS代碼：

ol > li:nth-last-child(5){
  background: orange;
}

first-of-type選擇器

:first-of-type選擇器類似于:first-child選擇器鼻疮，不同之處就是指定了元素的類型,其主要用來定位一個父元素下的某個類型的第一個子元素。

html代碼：

<div class="wrapper">
 <div>我是一個塊元素琳轿，我是.wrapper的第一個子元素</div>
 <p>我是一個段落元素判沟，我是不是.wrapper的第一個子元素，但是他的第一個段落元素</p>
 <p>我是一個段落元素</p>
 <div>我是一個塊元素</div>
</div>

CSS代碼：

.wrapper {
  width: 500px;
  margin: 20px auto;
  padding: 10px;
  border: 1px solid #ccc;
  color: #fff;
}
.wrapper > div {
  background: green;
}
.wrapper > p {
  background: blue;
}
/*我要改變第一個段落的背景為橙色*/
.wrapper > p:first-of-type {
  background: orange;
}

nth-of-type(n)選擇器

:nth-of-type(n)選擇器和:nth-child(n)選擇器非常類似崭篡，不同的是它只計(jì)算父元素中指定的某種類型的子元素挪哄。當(dāng)某個元素中的子元素不單單是同一種類型的子元素時，使用:nth-of-type(n)選擇器來定位于父元素中某種類型的子元素是非常方便和有用的琉闪。在:nth-of-type(n)選擇器中的n和:nth-child(n)選擇器中的n參數(shù)也一樣迹炼，可以是具體的整數(shù)，也可以是表達(dá)式，還可以是關(guān)鍵詞斯入。

html代碼：

<div class="wrapper">
 <div>我是一個Div元素</div>
 <p>我是一個段落元素</p>
 <div>我是一個Div元素</div>
 <p>我是一個段落</p>
 <div>我是一個Div元素</div>
 <p>我是一個段落</p>
 <div>我是一個Div元素</div>
 <p>我是一個段落</p>
 <div>我是一個Div元素</div>
 <p>我是一個段落</p>
 <div>我是一個Div元素</div>
 <p>我是一個段落</p>
 <div>我是一個Div元素</div>
 <p>我是一個段落</p>
 <div>我是一個Div元素</div>
 <p>我是一個段落</p>
</div>

CSS代碼：

.wrapper > p:nth-of-type(2n){
  background: orange;
}

last-of-type選擇器

:last-of-type選擇器和:first-of-type選擇器功能是一樣的砂碉，不同的是他選擇是父元素下的某個類型的最后一個子元素。

html代碼：

<div class="wrapper">
 <p>我是第一個段落</p>
 <p>我是第二個段落</p>
 <p>我是第三個段落</p>
 <div>我是第一個Div元素</div>
 <div>我是第二個Div元素</div>
 <div>我是第三個Div元素</div>
</div>

CSS代碼：

.wrapper > p:last-of-type{
  background: orange;
}

nth-last-of-type(n)選擇器

:nth-last-of-type(n)選擇器和:nth-of-type(n)選擇器是一樣的刻两，選擇父元素中指定的某種子元素類型增蹭，但它的起始方向是從最后一個子元素開始

html代碼：

<div class="wrapper">
 <p>我是第一個段落</p>
 <p>我是第二個段落</p>
 <p>我是第三個段落</p>
 <p>我是第四個段落</p>
 <p>我是第五個段落</p>
 <div>我是一個Div元素</div>
 <p>我是第六個段落</p>
 <p>我是第七個段落</p>
</div>

CSS代碼：

.wrapper > p:nth-last-of-type(3){
  background: orange;
}

only-child選擇器

:only-child選擇器選擇的是父元素中只有一個子元素，而且只有唯一的一個子元素磅摹。也就是說滋迈，匹配的元素的父元素中僅有一個子元素，而且是一個唯一的子元素户誓。

html代碼：

<div class="post">
  <p>我是一個段落</p>
  <p>我是一個段落</p>
</div>
<div class="post">
  <p>我是一個段落</p>
</div>

CSS代碼：

.post p {
  background: green;
  color: #fff;
  padding: 10px;
}
.post p:only-child {
  background: orange;
}

only-of-type選擇器

:only-of-type選擇器用來選擇一個元素是它的父元素的唯一一個相同類型的子元素饼灿。這樣說或許不太好理解，換一種說法厅克。:only-of-type是表示一個元素他有很多個子元素，而其中只有一種類型的子元素是唯一的橙依，使用:only-of-type選擇器就可以選中這個元素中的唯一一個類型子元素证舟。

html代碼：

<div class="wrapper">
 <p>我是一個段落</p>
 <p>我是一個段落</p>
 <p>我是一個段落</p>
 <div>我是一個Div元素</div>
</div>
<div class="wrapper">
 <div>我是一個Div</div>
 <ul>
   <li>我是一個列表項(xiàng)</li>
 </ul>
 <p>我是一個段落</p>
</div>

CSS代碼：

.wrapper > div:only-of-type {
  background: orange;
}

:enabled選擇器

在Web的表單中，有些表單元素有可用:enabled和不可用:disabled狀態(tài)窗骑，比如輸入框女责，密碼框，復(fù)選框等创译。在默認(rèn)情況之下抵知，這些表單元素都處在可用狀態(tài)。那么我們可以通過偽選擇器:enabled對這些表單元素設(shè)置樣式软族。

html代碼：

<form action="#">
 <div>
   <label for="name">Text Input:</label>
   <input type="text" name="name" id="name" placeholder="可用輸入框"  />
 </div>
  <div>
   <label for="name">Text Input:</label>
   <input type="text" name="name" id="name" placeholder="禁用輸入框"  disabled="disabled" />
 </div>
</form>

CSS代碼：

div{
  margin: 20px;
}
input[type="text"]:enabled {
  background: #ccc;
  border: 2px solid red;
}

:disabled選擇器

:disabled選擇器剛好與:enabled選擇器相反刷喜，用來選擇不可用表單元素。要正常使用:disabled選擇器立砸，需要在表單元素的HTML中設(shè)置disabled屬性掖疮。

html代碼：

<form action="#">
 <div>
   <input type="text" name="name" id="name" placeholder="我是可用輸入框" />
 </div>
 <div>
   <input type="text" name="name" id="name" placeholder="我是不可用輸入框" disabled />
 </div>
</form>

CSS代碼：

form {
  margin: 50px;
}
div {
  margin-bottom: 20px;
}
input {
  background: #fff;
  padding: 10px;
  border: 1px solid orange;
  border-radius: 3px;
}
input[type="text"]:disabled {
  background: rgba(0,0,0,.15);
  border: 1px solid rgba(0,0,0,.15);
  color: rgba(0,0,0,.15);
}

:checked選擇器

在表單元素中，單選按鈕和復(fù)選按鈕都具有選中和未選中狀態(tài)颗祝。（大家都知道浊闪，要覆寫這兩個按鈕默認(rèn)樣式比較困難）。在CSS3中螺戳，我們可以通過狀態(tài)選擇器:checked配合其他標(biāo)簽實(shí)現(xiàn)自定義樣式,而:checked表示的是選中狀態(tài)搁宾。

html代碼：

<form action="#">
 <div class="wrapper">
   <div class="box">
     <input type="checkbox" checked="checked" id="usename" /><span>√</span>
   </div>
   <lable for="usename">我是選中狀態(tài)</lable>
 </div>
 
 <div class="wrapper">
   <div class="box">
     <input type="checkbox"  id="usepwd" /><span>√</span>
   </div>
   <label for="usepwd">我是未選中狀態(tài)</label>
 </div>
</form>

CSS代碼：

form {
  border: 1px solid #ccc;
  padding: 20px;
  width: 300px;
  margin: 30px auto;
}

.wrapper {
  margin-bottom: 10px;
}

.box {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  position: relative;
  border: 2px solid orange;
  vertical-align: middle;
}

.box input {
  opacity: 0;
  position: absolute;
  top:0;
  left:0;
}

.box span {
  position: absolute;
  top: -10px;
  right: 3px;
  font-size: 30px;
  font-weight: bold;
  font-family: Arial;
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
  color: orange;
}

input[type="checkbox"] + span {
  opacity: 0;
}

input[type="checkbox"]:checked + span {
  opacity: 1;
}

::selection選擇器

::selection偽元素是用來匹配突出顯示的文本(用鼠標(biāo)選擇文本時的文本)

html代碼：

<p>“::selection”偽元素是用來匹配突出顯示的文本。瀏覽器默認(rèn)情況下倔幼，選擇網(wǎng)站文本是深藍(lán)的背景盖腿，白色的字體，</p>

CSS代碼：

::-moz-selection {
  background: red;
  color: green;
}
::selection {
  background: red;
  color: green;
}

:read-only選擇器

:read-only偽類選擇器用來指定處于只讀狀態(tài)元素的樣式损同。簡單點(diǎn)理解就是奸忽，元素中設(shè)置了readonly=’readonly’

html代碼：

<form action="#">
 <div>
   <label for="name">姓名:</label>
   <input type="text" name="name" id="name" placeholder="大漠" />
 </div>
 <div>
   <label for="address">地址:</label>
   <input type="text" name="address" id="address" placeholder="中國上海" readonly="readonly" />
 </div>
</form>

CSS代碼：

form {
  width: 300px;
  padding: 10px;
  border: 1px solid #ccc;
  margin: 50px auto;
}
form > div {
  margin-bottom: 10px;
}

input[type="text"]{
  border: 1px solid orange;
  padding: 5px;
  background: #fff;
  border-radius: 5px;
}

input[type="text"]:-moz-read-only{
  border-color: #ccc;
}
input[type="text"]:read-only{
  border-color: #ccc;
}

:read-write選擇器

:read-write選擇器剛好與:read-only選擇器相反堕伪，主要用來指定當(dāng)元素處于非只讀狀態(tài)時的樣式。

html代碼：

<form action="#">
 <div>
   <label for="name">姓名:</label>
   <input type="text" name="name" id="name" placeholder="大漠" />
 </div>
 <div>
   <label for="address">地址:</label>
   <input type="text" name="address" id="address" placeholder="中國上海" readonly="readonly" />
 </div>
</form>

CSS代碼：

form {
  width: 300px;
  padding: 10px;
  border: 1px solid #ccc;
  margin: 50px auto;
}
form > div {
  margin-bottom: 10px;
}

input[type="text"]{
  border: 1px solid orange;
  padding: 5px;
  background: #fff;
  border-radius: 5px;
}

input[type="text"]:-moz-read-only{
  border-color: #ccc;
}
input[type="text"]:read-only{
  border-color: #ccc;
}

input[type="text"]:-moz-read-write{
  border-color: #f36;
}
input[type="text"]:read-write{
  border-color: #f36;
}

::before和::after

::before和::after這兩個主要用來給元素的前面或后面插入內(nèi)容栗菜，這兩個常和content配合使用欠雌，使用的場景最多的就是清除浮動。

.clearfix::before,
.clearfix::after {
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}

當(dāng)然疙筹，我們還可以使用它們來實(shí)現(xiàn)陰影效果

.effect::before, .effect::after{
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:50%;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}

上面代碼作用在class名叫.effect上的div的前（before）后(after)都添加一個空元素富俄，然后為這兩個空元素添加陰影特效。

最后編輯于：2017.12.03 05:43:01

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末而咆，一起剝皮案震驚了整個濱河市霍比，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌暴备，老刑警劉巖悠瞬，帶你破解...
沈念sama閱讀 217,406評論 6贊 503
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異涯捻，居然都是意外死亡浅妆，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,732評論 3贊 393
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門障癌，熙熙樓的掌柜王于貴愁眉苦臉地迎上來凌外，“玉大人，你說我怎么就攤上這事涛浙】导” “怎么了？”我有些...
開封第一講書人閱讀 163,711評論 0贊 353
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵轿亮，是天一觀的道長疮薇。經(jīng)常有香客問我，道長我注，這世上最難降的妖魔是什么惦辛？我笑而不...
開封第一講書人閱讀 58,380評論 1贊 293
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮仓手，結(jié)果婚禮上胖齐，老公的妹妹穿的比我還像新娘。我一直安慰自己嗽冒，他們只是感情好呀伙，可當(dāng)我...
茶點(diǎn)故事閱讀 67,432評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著添坊，像睡著了一般剿另。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 51,301評論 1贊 301
城市分裂傳說
那天雨女，我揣著相機(jī)與錄音谚攒，去河邊找鬼。笑死氛堕，一個胖子當(dāng)著我的面吹牛馏臭，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播讼稚，決...
沈念sama閱讀 40,145評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼括儒，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了锐想？” 一聲冷哼從身側(cè)響起帮寻，我...
開封第一講書人閱讀 39,008評論 0贊 276
萬榮殺人案實(shí)錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎赠摇，沒想到半個月后固逗，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 45,443評論 1贊 314
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡藕帜，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,649評論 3贊 334
?白月光啟示錄
正文我和宋清朗相戀三年烫罩，在試婚紗的時候發(fā)現(xiàn)自己被綠了。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片耘戚。...
茶點(diǎn)故事閱讀 39,795評論 1贊 347
活死人
序言：一個原本活蹦亂跳的男人離奇死亡嗡髓，死狀恐怖操漠，靈堂內(nèi)的尸體忽然破棺而出收津，到底是詐尸還是另有隱情，我是刑警寧澤浊伙，帶...
沈念sama閱讀 35,501評論 5贊 345
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布撞秋，位于F島的核電站，受9級特大地震影響嚣鄙，放射性物質(zhì)發(fā)生泄漏吻贿。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,119評論 3贊 328
男人毒藥：我在死后第九天來索命
文/蒙蒙一哑子、第九天我趴在偏房一處隱蔽的房頂上張望舅列。院中可真熱鬧，春花似錦卧蜓、人聲如沸帐要。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,731評論 0贊 22
一樁弒父案弥奸，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽榨惠。三九已至，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間赠橙，已是汗流浹背耽装。一陣腳步聲響...
開封第一講書人閱讀 32,865評論 1贊 269
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留期揪，地道東北人掉奄。一個月前我還...
沈念sama閱讀 47,899評論 2贊 370
代替公主和親
正文我出身青樓，卻偏偏與公主長得像横侦，于是被迫代替她去往敵國和親挥萌。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 44,724評論 2贊 354

CSS3簡明教程之征服CSS3選擇器

第6章 征服CSS3選擇器

屬性選擇器

結(jié)構(gòu)性偽類選擇器 root

結(jié)構(gòu)性偽類選擇器 not

結(jié)構(gòu)性偽類選擇器 empty

結(jié)構(gòu)性偽類選擇器 target

結(jié)構(gòu)性偽類選擇器 first-child

結(jié)構(gòu)性偽類選擇器 last-child

結(jié)構(gòu)性偽類選擇器 nth-child(n)

結(jié)構(gòu)性偽類選擇器 nth-last-child(n)

first-of-type選擇器

nth-of-type(n)選擇器

last-of-type選擇器

nth-last-of-type(n)選擇器

only-child選擇器

only-of-type選擇器

:enabled選擇器

:disabled選擇器

:checked選擇器

::selection選擇器

:read-only選擇器

:read-write選擇器

::before和::after

推薦閱讀更多精彩內(nèi)容

第6章征服CSS3選擇器