CSS學習筆記:選擇符

1.簡單選擇符
基於HTML標籤的類型選擇符和基於HTML 屬性的class或id選擇符
樣本:
a:HTML標籤的類型選擇符(省出<>的HTML標籤的名字)
p{...},body{...},input{...}

b:基於HTML 屬性的class或id選擇符
<input type="text" name="item" class="b" />
.b{...}
,
<label id="item">...</label>
#item{...}

2.通用選擇符
CSS定義了一個通用選擇符,適用於頁面內所有標籤和內容,它由星號(*)表示.
樣本:
*{...}
*.b{...}

注意:
若編寫通用選擇符的規則中,還包括一些其它內容(class,id選擇符),那麼可以省略星號.實際上,class選擇符的通常方法只是省略星號的通用選擇符的一種特殊情況.

3.組合簡單選擇符
要使CSS規則發揮最大的作用,需要寫組合規則(抽取共同的部分).通過集中列出選擇符,並用逗號將他們分隔,可以聯合規則.
.b,#item{...}

4.子選擇符
在HTML,XML中,孩子是完全包括於另一個元素內容之內的元素.通過組合簡單選擇符,並用空格隔開.子選擇符定義在基於頁面內給定標籤出現處的規則.
樣本:
<div id="item">
  <ul>
    <li>1</li>
    <li>2</li>
  </ul>
</div>
#item ul li{...}

5.偽類和虛擬元素
5.1:虛擬元素
偽類選擇符是基於一組預定義性質的選擇符,HTML元素可以佔有這些預定義性質.實際上這些性質與class屬性的功能相同.在CSS術語中稱為:偽類
偽選擇符標識虛擬元素,即在標記中不存在,但瀏覽器可以推理並應用樣式的元素.在偽類中,沒有對應虛擬元素的標記
樣本:
:link{...}
a:link{...}

注意:
通過把偽類和真正的類甚至是其它的偽放在一起.中間不留空格,只有.和:指示符可以將它們聯合起來
樣本:
<a href="4.html" class="nav1">4</a>
...
<a href="n.html" class="navn">n</a>

a:link.nav1{...}
a.navn:link{...}
常用的有:
a:link{...}
a:visited{...}
注意:
link和visited是互斥的.給定的串連在給定的時間點上只能是其中一種.不可能同時是兩種.當然你也可以這樣寫:
a:link,a:visited{...}

這裡就不一一羅列虛擬元素了!可以去W3C去看看文檔或準備一本<<CSS權威指南>>參考一下.

5.2:虛擬元素
階層式樣式表定義了4種虛擬元素,也稱為:虛擬元素.它們從內容建立.這些內容位於與基本元素相關的文檔中.
:before-插入元素前的內容
:after-插入元素後的內容
:first-letter-塊元素的第一個字母
:first-line-塊元素的第一行

樣本:
<div id="item">
This is <p>Car</p>
</div>
#item p:first-line{...}
#item p:first-line:first-letter{...}

6.屬性選擇符
屬性選擇符對設定在元素上的所有特殊HTML 屬性的存在,也可能上值進行測試
樣本:
input[type="checkbox"]{...}
input[type="submit"]{...}
option[value="a"]{...}
hr[noshade]{...}

使用通用選擇符:
*[title]{...}
[title]{...}

除了檢驗屬性的存在之外,還可以使用屬性值進行選擇.

6.1元素[屬性="值"]{...}
注:指定確切匹配,只選擇那些已經給定屬性值的元素
樣本:
<table summary="layout">
table[summary="layout"]{...}

6.2元素[屬性~="值"]{...}
注:記錄匹配,若規則中的值是HTML中給定的幾個值之一,用空格隔開
樣本:
<div class="foo bar">...</div>
div[class~="bar"]

6.3元素[屬性|="值"]{...}
注:形式匹配規則的值和HTML的值,並比較連字號前的字元
樣本:
<span lang="en-us">...</span>
*[lang|="en"]

7.家族關係
CSS中基於家族的選擇符基於HTML標籤間的關係選擇元素
7.1子選擇符
子選擇符是後代選擇符的一種特殊類型.子選擇符僅指那些屬於其他元素直系子女的元素,不指任何"孫子"或其後代.子選擇符由父元素與子項目間的大於符號(>)指示
樣本:
<div class="item">
  <p>Yes</p>
  <p>No</p>
</div>

.item >p{...}
只有第一個p應用規則

7.2近親選擇符
若兩個HTML標籤具有相同的父元素.他們就是同胞.通過列出第一個同胞,一個加號(+),然後是第二個同胞,就可以寫近親規則.看下面的樣本:
<ul>
 <li>Yes</li>
 <li>No</li>
 <li>Define</li>
</ul>
li +li{...}

注意:
近親選擇符對基於兩個近親的情況作出選擇,但是它將規則只應用於兩個中的第二個,第一個不受規則影響.這一條非常重要.

同胞意味著可視化地流向一起,而近親選擇符對於添加,刪除邊矩,邊框,填充很有用.
樣本:
<dl>
  <dt>CSS</dt>
  <dd>Cascading Style sheets</dd>

  <dt>HTML</dt>
  <dd>Hypertext Markup Language</dd>
  <dd>See also:<cite>XHTML</cite></dd>

  <dt>WAI</dt>
  <dd>Web Accessibility Initiative</dd>
  <dd>See also:<cite>W3C</cite></dd>

  <dt>WCAG</dt>
  <dd>Web Content Accessibility Guidelines</dd>

  <dt>WWW</dt>
  <dd>World Wide Web</dd>

  <dt>W3C</dt>
  <dd>World Wide Web Consortium</dd>
  <dd>See also:<cite>WWW</cite></dd>

  <dt>XHTML</dt>
  <dd>eXtensible HTML</dd>
  <dd>See also:<cite>HTML</cite></dd>
</dl>

dt{...}
dt+dt,dd+dt{...}
dt+dd{...}
dd+dd{...}