css3的选择器

一.css3新增属性选择器

    1. [att*=val]  某元素的attr属性的值包含val指定的字符串

    2. [att^=val]  某元素的attr属性的值的开头字符串为val指定的字符串

    3. [att$=val]  某元素的attr属性的值的结尾字符串为val指定的字符串

二.css3的结构性伪类选择器

    1.  a:link  未被访问的链接

    2.  a:visited  已被访问的链接

    3.  a:hover   鼠标移到的元素

    4.  a:active   正在被点击（鼠标按下还未弹起时的元素）

    5.  :root    页面的根元素，通常指html元素  用法：<style>  :root{ background:green; } </style>

    6.   #div1 *:not(#div2)   对div1元素应用而不对div1中的div2元素应用该样式

    7.  :empty  页面中元素内容为空白的元素   用法:   <style>  td:empty{ background:red; }  或者 :empty{ }</style>

    8.  :target   对当前页面内的a标签链接到的锚元素，在点击a标签跳到该元素后应用给该元素

         用法: div:target{ background:#000; } 或者
:target{ background:#000; } 

         示例； 

        <style> div:target{ background:#000; } </style>

        <a href="#A">链接一</a>

       <div id="A">

          <h2>标题</h2>

          <p>内容...</p>

      </div>

三.css3的UI元素状态伪类选择器

   下面的E代表某种元素

  1.  E:hover  鼠标位置停留        

       E:active  鼠标在其上按下还未弹起      

       E:focus  获得焦点的元素

  2.  E:enabled   元素可用时      

       E:disabled  元素不可用时     

       如:<div id=div1></div> <div id=div2 disabled="disabled"></div>

       div:enabled会选择上div1,而div:disabled会选择上div2

  3.  E:read-only  元素仅可读不可编辑时         

       E:read-write  元素非只读时

      如：<input type="text" readonly="readonly" value="小猪猪" >

             <input type="text" value="小香香">

      input[type="text"]:read-only 会选择上第一个input  ； input[type="text"]:read-write会选择上第二个div

  4.  E:checked  指定的radio活checkbox元素处于远中状态时

       E:default     指定的radio活checkbox元素默认选中的选项的样式   ps:目前仅谷歌浏览器支持

       E:indeterminate  
指定的radio活checkbox元素没有任何一个选项被选中时的样式  ps:目前仅谷歌浏览器支持

  5.  E::selection  指定被光标选中的文字/语句的样式

       如：对整个文档应用写作               ::selection

              对input文本元素应用写作     input[type"text"]::selection

  6.  E:valid   符合html5的诸如required属性指定的验证时

       E:invalid  不符合验证时

  7.  E:required  允许使用required属性且确实使用了required属性的必填元素的样式

       E:optional   允许使用required属性但未使用的非必填的元素的样式

  8.  E:in-range   指定元素被设置了有效值范围，且输入值符合该范围要求

       E:out-of-range   指定元素被设置了有效值范围，但输入不符合范围要求

 
9.  #div1~p   div1元素后面的所有和div1元素同级别的兄弟元素，不包含位于div1之前的同级别兄弟元素