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;
    }