css3選擇器

常用選擇器

• 子元素選擇器
  E>F： E元素內的每個子元素F(選取父元素是E元素的每個F元素)

• 兄弟選擇器
  E+F：E元素後面的第一個兄弟元素F
  E~F：所有在E元素之後的兄弟元素F

• 屬性選擇器
  E[att]：有屬性att的所有E元素
  E[att='val']：屬性att的值是val的元素
  E[att^='val']：屬性att的值以val開頭的元素
  E[att$='val']：屬性att的值以val結尾的元素
  E[att*='val']：屬性att的值包含val字串的元素

• UI元素狀態偽類選擇器
  E:enabled 匹配表單中可用的元素
  E:disabled 匹配表單中禁用的元素
  E:checked 匹配表單中被選中的radio(單選框)或checkbox(核取方塊)元素

• 偽元素選擇器
  E::first-line 選擇每個塊級元素的首行
  E::first-letter 選擇每個塊級元素的首字母
  E::selection 用來改變瀏覽網頁選中文字的預設效果基本上只有background、color有效果

• 結構性偽類
  E:first-child 選擇第一個子元素E(選擇所有屬於其父元素的首個子元素)
  E:last-child 選擇最後一個子元素E(選擇所有屬於其父元素的最後一個子元素)
  E:nth-child(n) 選擇一個或多個特定的子元素(第一個編號為1)
  E:nth-last-child(n) 選擇一個或多個特定的子元素，從最後一個子元素開始算
  E:nth-of-type(n) 選擇指定的元素，僅匹配使用同種標籤的元素
  E:nth-last-of-type(n) 選擇指定的元素，從元素的最後一個開始計算，僅匹配使用同種標籤的元素
  E:first-of-type 匹配父元素下使用同種標籤的第一個子元素
  E:last-of-type 匹配父元素下使用同種標籤的最後一個子元素
  E:only-child 匹配父元素下僅有的一個子元素
  E:only-of-type 匹配父元素下使用同種標籤的唯一一個子元素
  E:empty 匹配一個不包含任何子元素的元素(文字節點也被看作子元素)
  E:not(s) 匹配不符合當前選擇器的任何元素(反選)

• 圓角邊框

  border-radius：[ length | % ]{1,4} / [ length | % ]{1,4}
  border-top-left-radius:5px ;
  border-top-right-radius:15px;
  border-bottom-right-radius:20px;
  border-bottom-left-radius:25px;
  border-radius:5px 15px 20px 25px ;
  border-radius:20px / 10px ;

• 多彩邊框 火狐（FF）2.0以上版本支援

  border-colors：<color>
  相關屬性：
  border-top-colors
  border-right-colors
  border-bottom-colors
  border-left-colors

• 影象邊框

  border-image-source : 圖片邊框的路徑
  border-image-slice : 圖片邊框向內偏移
  border-image-width：圖片邊框的寬度
  border-image-repeat : 指定邊框背景圖的填充方式

border-image-repeat : stretch | repeat | round

預設值：stretch

stretch： 指定用拉伸方式來填充邊框背景圖

repeat： 指定用平鋪方式來填充邊框背景圖，當圖片碰到邊界時， 如果超過則被截斷

round： 指定用平鋪方式來填充邊框背景圖，圖片會根據邊框的尺寸，動態調整圖片的大小直至正好可以鋪滿整個邊框

    div{
        width:200px;
        height:100px;
        text-align: center;
        font:bold 20px/100px 微軟雅黑;
    }
    div{
        border:1em solid #ccc;
        border-width: 28px;
        border-image-source: url(images/bg.png);
        border-image-slice: 33.3%;
        border-image-repeat: round;
    }