css选择器

css的各种选择器

1 .css 派生选择器
     派生选择器也叫做上下文选择器，派生选择器允许根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，可以使 HTML 代码变得更加整洁。
2.css id选择器
     id选择器可以标有特定id的html元素指定样式，id选择器以“#”定义。   注意：id属性在html中出现一次
但是一个选择器可以有多种用法，id选择器可以作为派生选择器使用很多次。如：#sidebar h1{font-size:20px color:red;}
3.css类选择器
      在css中，类选择器以一个.出现，和id选择器一样，class也可以被用作派生选择器：. box id{color:#bfa;}
注意：可以将类选择器分配给任何一个元素
4.属性选择器
      对带有指定属性的html元素设置样式，而不仅局限于class和id注意：只有在规定了<!doctype>时 ie7和ie8才支持属性选择器。在ie6和更低的版本中不支持。属性选择器用“[]”来设置，为下列带有title属性的所有元素设置[title]={color:red;}属性选择器，在不为带class和id的表单设置样式时特别有用。input[type="text"]{width:500px;display:block;margin-bottom:10px}
’input [type="botton']{width:500px;display:block;margin-left:10px;]
可选属性可参考w3c手册；
5.元素选择器
      元素就是标签，所以元素选择器就是文档的元素就是最基本的选择器。比如p,h1,body，a甚至可以是html本身。
6.选择器分组
      通过分组可以简化我们的代码，这样可以即简洁又便利。h1,h2,h3,h4{color:red;font-size:50px}
7.通配符选择器
      通配符选择器用*来表示，该选择器可以与任何元素匹配。*{margin：0；padding：0；}
8.后代选择器
     后代选择器又称为包含选择器。后代选择器可以选择某元素的后代元素。比如.class p来表示class元素的后代p元素
9.子元素选择器
     子元素选择器与后代元素相比只能选择作为某元素子的子元素。如希望选择只作为h1元素子元素的strongh1 >strong{color:red}
10.相邻兄弟选择器
     相邻兄弟选择器，可选择紧接在另一个元素后的元素，且二者拥有相同的父元素。给h1后面的p标签设置颜色h1 +p{color:red;}
11.伪类
     css中的伪类用于某些选择器添加一些特殊效果。
:link{color:red;}/未访问的链接
:visited{color:red;}/访问过的链接
:hover{color:red;}/鼠标悬停的链接
:active{color:red;}/鼠标点击的链接
:first-child*选择第一个子元素
:first-of-type相同类型中的第一个子元素
:nth-child()括号里面可以指定第几个子元素（odd可选为奇数，even表示偶数）
:not(:nth-of-type())括号里面表示没有被选中的子元素，前提必须是相同的类型
“input：focus{color:yellow;}规定获得焦点的输入字段的颜色。
12.伪元素
::first-letter 向文本的第一个字母添加样式
::first-line 向文本中首行添加样式
::before 向元素之前添加内容
::after 向元素之后添加内容
::selection可以指定鼠标选中的效果

                                                                                                                                             以上内容参考于w3scholl手册