web开发中css选择器使用

       html中css选择器非常重要，不管是对前端还是后端来说，我们常常因为需要调节页面样式和颜色而烦恼，所以今天总结一下选择器，希望与大家共享！

      

1. .class选择器

   The .class选择器是指定类的所有元素的样式，所有主流浏览器都支持。

2.  #id选择器

#id选择器指定具有ID的元素的样式，所有主流浏览器都支持。
3.  element选择器

The element 选择器选择指定元素名称的所有元素，所有主流浏览器都支持element 选择器。

    p

{

background-color:yellow;

}

   <p>My best friend is Mickey.</p>

4.  [attribute]选择器

选择所有带有target属性的 <a>元素：

   a[target]
      { 
       background-color:yellow;
       }

所有主流浏览器都支持【attribute】选择器

5. ：Link选择器
    :link向未访问的链接添加特殊的样式。

注意: :link 选择器对已经访问的链接没有样式。

支持该属性的第一个浏览器版本号：

Google 4.0、IE 7.0、Firefox 2.0、Safari 3.1、Opera 9.6

6.  ：visit选择器

:visited向访问过的链接添加特殊的样式。

支持该属性的第一个浏览器版本号：

Google 4.0、IE 7.0、Firefox 2.0、Safari 3.1、Opera 9.6

7.  ：active选择器

    :active向活动的链接添加特殊的样式。

 当你点击一个链接时它变成活动链接。

   注意: 为了产生预期的效果，在CSS定义中，:active必须位于:hover之后！！

   支持该属性的第一个浏览器版本号：

Google 4.0、IE 7.0、Firefox 2.0、Safari 3.1、Opera 9.6

   注意：对所有元素IE8以及新版本浏览器均支持:active选择器。:active选择器对于IE7只支持链接。

8  ：hover选择器

:hover在鼠标移到链接上时添加的特殊样式。

提示: :hover 选择器器可用于所有元素，不仅是链接。

注意: 为了产生预期的效果，在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后！！

支持该属性的第一个浏览器版本号：

Google 4.0、IE 7.0、Firefox 2.0、Safari 3.1、Opera 9.6

注意:在 IE 中必须声明 <!DOCTYPE> 才能保证 :hover 选择器能够有效。

9.  ：focus选择器

:focus选择器用于选择具有焦点的元素。

提示: :focus选择器接受键盘事件或其他用户输入的元素。 

input:focus

{

background-color:yellow;

}

<form>

      Firstname:<input type=”text”name=”firstname”/></br>

      Lastname:<input type=”text”name=”lastname”/>

</form>

支持给属性的浏览器是：

Google 4.0、IE 8.0、Firefox 2.0、Safari 3.1、Opera 9.6

注意: :focus 选择器选择器在IE8中必须声明<!DOCTYPE> .

10.  ：only-child选择器

     :only-child选择器匹配属于父元素中唯一子元素的元素。

     支持该属性的浏览器的第一浏览器版本号：

  Google 4.0、IE 9.0、Firefox 3.5、Safari 3.2、Opera 9.6

11.  ：nth-child()选择器

      :nth-child(n)选择器匹配父元素中的第n个子元素。

      n可以是一个数字，一个关键字，或者一个公式。

      支持该属性的浏览器的第一个浏览器版本号：

  Google 4.0、IE 9.0、Firefox 3.5、Safari 3.2、Opera 9.6

12.    ：root选择器

       :root选择器用匹配文档的根元素。

       在HTML中根元素始终是HTML元素。

       支持该浏览器的第一个浏览器版本号：

   Google 4.0、IE 9.0、Firefox 3.5、Safari 3.2、Opera 9.6

13.    ：target选择器

        ＃ 锚的名称是在一个文件中链接到某个元素的URL。元素被链接到目标元素。

        :target选择器可用于当前活动的target元素的样式。

 支持该属性的浏览器的第一个浏览器版本号：

      Google 4.0、IE 9.0、Firefox 3.5、Safari 3.2、Opera 9.6

14.   ：enabled选择器

      :enabled 选择器匹配每个启用的的元素（主要用于表单元素）。

      input[type="text"]:enabled
       {
         background:#ffff00;
       }

      支持该属性的第一个浏览器版本号：

      Google 4.0 IE 9.0 Firefox 3.5 Safari 3.2 Opera 9.6

15    :disabled选择器

       :disabled 选择器匹配每个禁用的的元素（主要用于表单元素）。

       input[type="text"]:disabled
       {
          background:#dddddd;
       }

       支持该属性的第一个浏览器版本号：

        Google 4.0 IE 9.0 Firefox 3.5 Safari 3.2 Opera 9.6

16.    ：checked选择器

        :checked 选择器匹配每个选中的输入元素（仅适用于单选按钮或复选框）。

        支持该属性的第一个浏览器版本号：

         Google 4.0 IE 9.0 Firefox 3.5 Safari 3.2 Opera 9.6

17.    ：readonly选择器

        :read-only 选择器用于选取设置了 "readonly" 属性的元素。

        表单元素可以设置 "readonly" 属性来定义元素只读。

        注意： 目前，大多数浏览器, :read-only 选择器适用于 input 和 textarea 元素，

        但是它也适用于设置了 "readonly" 属性的元素。

        input:read-only
        { 
         background-color: yellow;
        } 

        支持该属性的第一个浏览器版本号：

         Google 支持 IE不支持Firefox -moz- Safari yes Opera yes

18.    :optional选择器

        :optional 选择器在表单元素是可选项时设置指定样式。

        表单元素中如果没有特别设置 required 属性即为 optional 属性。

        注意: :optional 选择器只适用于表单元素: input, select 和 textarea。 

        支持该属性的第一个浏览器版本号：

        Google 10.0 IE 10.0 Firefox 4.0 Safari 5.0 Opera 10.0

19.    ：valid选择器

        :valid 选择器在表单元素的值需要根据指定条件验证时设置指定样式

        注意: :valid 选择器只作用于能指定区间值的元素，

        例如 input 元素中的 min 和 max 属性，及正确的 email 字段, 合法的数字字段等。

        input:valid

{ 
       background-color: yellow;
      }

      支持该浏览器的第一个浏览器版本号：

      Google 10.0 IE 10.0 Firefox 4.0 Safari 5.0 Opera 10.0

20.  ：invalid选择器

      :invalid 选择器用于在表单元素中的值是非法时设置指定样式。

       注意： :invalid 选择器只作用于能指定区间值的元素，

       例如 input 元素中的 min 和 max 属性，及正确的 email 字段, 合法的数字字段等。

       支持该属性的第一个浏览器版本号：

       Google 10.0 IE 10.0 Firefox 4.0 Safari 5.0 Opera 10.0