高級css樣式選擇器

一.基本選擇器

• 通用元素選擇器，匹配任何元素，在頁面上的每一個元素上起作用
  h4 標籤選擇器，匹配所有使用h4標籤的元素，其優先級僅僅只比 * 高
  .test (class)類選擇器，匹配所有class屬性中包含textbox的元素，class選擇器與id選擇器的不同是class選擇器能作用於期望樣式化的一組元素
  #mainWrapper id 選擇器 匹配所有id屬性等於mainWrapper的元素。id是我們最常用的css選擇器之一。id選擇器的優勢是精準，高優先級（優先級基數爲100，遠高於class的10），作爲javascript腳本鉤子的不二選擇，同樣缺點也很明顯優先級過高，重用性差.

*{margin:0;padding:0;} /*web設計者經常用它將頁面中所有元素的margin和padding設置爲0。 *選擇符也可以在子選擇器中使用*/

a{text-decoration:none;}

ul{color:red;}

#mainWrapper *{border-bottom:1px solid #ccc;}
/*上面的代碼中會應用於id爲container元素的所有子元素中。 除非必要，我不建議在頁面中過的的使用星狀選擇符，因爲他的作用域太大，相當耗瀏覽器資源*/

層次選擇器：
#content img {max-width: 600px;} /* 表示id爲content時，下面的img元素最大寬度屬性爲600px（父選擇器可以爲類、Id選擇器，子選擇器也可以）*/

.line_tabel  tr{height:30px;} /* 表示table的class爲line_tabel時，下面的tr元素height屬性爲30px  */

div input{background-color:red} /* 表示div下的input子元素（父選擇器爲元素） */

二 多元素的組合選擇器/擴展選擇器()

E,F 多元素選擇器/羣組選擇器,同時匹配 所有E元素或者F元素,E和F之間用逗號分隔,如 div,span,img{}(兼容IE6+)
E F後代元素選擇器– 這也是我們最常用的一種選擇器。這種方式的選擇器將選取其下所有匹配的子元素，無視層級，所以有的情況是不宜使用的。匹配所有屬於E元素後代的F元素，E 和 F之間用空格分隔
E > F 子元素選擇器，匹配所有E元素的子元素F,與後帶選擇器E F不同的是，子選擇器只對E下的直接子級F起作用

E＋Ｆ　毗鄰元素選擇器，匹配所有緊隨Ｅ元素之後的同級元素Ｆ（只匹配第一個元素）

li a{
　　text-decoration:none;
　}
#去掉li下的所有a的下劃線

ul + p{
　　color:red;
　}
#相鄰選擇器，上述代碼中就會匹配在ul後面的第一個p，將段落內的文字顏色設置爲紅色(只匹配第一個元素)。

div#container > ul {
     border: 1px solid black;
　}

<div id=container>
      <ul>
         <li> List Item
           <ul>
              <li> Child </li>
           </ul>
         </li>
         <li> List Item </li>
         <li> List Item </li>
         <li> List Item </li>
      </ul> 
</div>
#子選擇器。與後代選擇器E F不同的是，子選擇器只對E下的直接子級F起作用。在上面的css和html例子中，div#container>ul僅對container中最近一級的ul起作用。從理論上來講E > F是值得提倡選擇器。

三 屬性選擇器

屬性選擇器讓你可以基於屬性來定位一個元素，你可以指定鈣元素的某個屬性，這樣所有使用該屬性–而不管它的值—的這個元素都將被定位，也可以明確並定位在這些屬性上使用特定值的元素—這就是屬相選擇器的作用

css2,1 屬性選擇器

E[att] 匹配所有具有att屬性的E元素,不考慮它的值（注意：E元素在此處可以省略，比如[cheacked]）；
E[att=value] 匹配所有att值等於value的元素，即該屬性具有具體的值；
E[att~=value] 匹配所有att屬性具有多個空格分隔的值,其中一個值等於value的E元素，即該屬性的值必須是一系列用空格隔開的多個值，(比如，class=title featured home),而且這些值中必須有一個值是指定的值value;
E[att|=value] 匹配所有att屬相具有多個連字號分隔的值，屬性的值就是value或者以value開始並立即跟上一個 -字符，也就是value-。(比如lang=zh-en);

css3 屬相選擇器

E[att^=value] 屬性att的值以value開頭的元素，即：該屬相的值以指定的值結束;
E[att$=value] 屬相att的值以value結尾的元素，即：該屬性的值包含指定的值;
E[att*=value] 屬性att的值包含value字符串，

例1、匹配帶有title屬性的鏈接元素
a[title] {
      color: green;
　}

例2、匹配所有擁有href屬性，且href爲http://fity.cn的所有鏈接
a[href=http://fity.cn] {
     color: #1f6053; 
　}

例3、匹配data-info屬性中包含“textimg”鏈接的字體顏色爲紅色。匹配data-info屬性中包含“img”的鏈接設置黑色邊框
<a href=path/to/image.jpg data-info=textimg img> Welcome to http://fity.cn </a> 
a[data-info~=textimg] {
      color: red;
　}
a[data-info~=img] {
      border: 1px solid black;
　}

例4、匹配href中包含 fity.cn 的所有鏈接
a[href*=fity.cn] {
     color: #1f6053;
　}

例5、匹配href中所有以http開頭的鏈接 
a[href^=http] {
      background: url(path/to/external/icon.png) no-repeat;
      padding-left: 10px;
　}

例6、設定所有class屬性值包含 article 並帶 - 字符的div元素的背景色爲#333
div[class|=article] {
  background-color: #333;
　}

四 僞類選擇器

E:first-child 匹配父元素的第一個子元素。
E:link 匹配所有未被點擊的連接標籤
E:visited 匹配所有已被點擊過的標籤
E:active 匹配鼠標已經其上按下，還沒有釋放的E元素
E:hover 匹配鼠標懸停其上的E元素
E:foucs 匹配獲得當前焦點的E元素
E:lang(c)匹配lang屬相等於c的E的元素

五 css2.1中的爲元素/僞對象

E::first-line 匹配E元素的第一行
E::first-letter 匹配E元素的第一個字母
E::before 在E元素之前插入生的內容
E::after 在E元素之後插入生成的內容

h1:after {
　　content:url(/i/logo.gif);
　}
#上面的代碼實現了在h1標題的後面顯示一張圖片。

六 css3 同級元素通用選擇器

##
E ~ F 相鄰選擇器，與前面提到的E + F 不同的是，E~ F 匹配與E 相同級別的所有F元素，E+F 只匹配第一個

.article p ~ ul {
  color:red;
　}
#上面的代碼設定所有的特定div屬性爲article

七 css3中與用戶界面有關的僞類

E:enabled 匹配表單中激活的元素（比如，文本輸入框）和 checked或unchecked狀態（radio單選按鈕和checkbox複選框）
E:disabled 匹配表單中禁用的元素
E:checked 匹配處於選定狀態的界面元素
E::section 定義用戶鼠標選擇內容的樣式

css3中結構性僞類

E:root 匹配文檔的根元素，對於html文檔來說就是HTML元素
E:nth-child(n) 匹配其父元素的第n個子元素，第一個編號爲1
E:nth-last-child(n) 匹配其父元素的倒數第n個子元素，第一個編號爲1
E:nth-of-type(n) 與:nth-child()作用類似，不同的是它匹配的不是某個序列元素，而是元素類型E:nth-last-of-type(n)與:nth-last-child() 作用類似，但是僅匹配使用同種標籤的元素
E:last-child匹配父元素的最後一個子元素，等同於:nth-last-child(1)
E:first-of-type匹配父元素下使用同種標籤的第一個子元素，等同於:nth-of-type(1)
E:last-of-type 匹配父元素下使用同種標籤的最後一個子元素，等同於:nth-last-of-type(1)
E:only-child匹配父元素下僅有的一個子元素，等同於:first-child:last-child或 :nth-child(1):nth-last-child(1)，這個僞類用的比較少
E:only-of-type匹配父元素下使用同種標籤的唯一一個子元素，等同於:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
E:empty匹配一個不包含任何子元素的元素，注意，文本節點也被看作子元素

css3的反選僞類/否定僞類選擇器

E:not(value) 否定僞類選擇器用來在匹配元素時排除某些元素，匹配不符合當前選擇器的任何元素

例1、設定除了id爲container的div元素字體顏色爲blue
div:not(#container) {
      color: blue;
　}

例2、設定你的article的div中的所有段落(p)有比較大的字體，除了表示時間和日期的段落
.article p:not(.date) {
  font-size: 13px;
　}

十css中的:target僞類

E:target 匹配當文檔中特定id點擊後的效果

h4:target {
  background: #F2EBD6;
　}
#上面代碼設定單擊h4文本鏈接時相應的文本以#F2EBD6高亮顯示
詳細可以閱讀：http