css selector

选择器

元素选择器

最简单的为元素选择器，只选择特定的标签，如h1。

html {color:black;} p {color:gray;}  h2 {color:silver;}

多个元素选择器可以组合未组选择器：

h1, h2, h3, h4, h5, h6 {color:blue;}

 

类选择器(.)

<p class="important">

This paragraph is very important.

</p>

语法：*.important {color:red;}  or  .important {color:red;}

 

ID选择器(#)

id选择器可以为定义了id属性的HTML元素指定特定的样式。HTML元素的ID需要是唯一的。id选择器以#来定义。id选择器可以单独使用，也可以和上下文选择器一起工作。

<p id="intro">This is a paragraph of introduction.</p>

语法：*#intro {font-weight:bold;} or  #intro {font-weight:bold;}

div #inrto  {font-weight:bold;}

 

属性选择器([ ])

属性选择器可以为声明了指定属性的HTML元素指定样式。在为不带有class和id的标签设置样式时有用。

属性选择器以[]来定义。

语法：

[title] 可以选择声明了title属性的标签。

[title=test] 可以选择声明title="test"的标签

更多细节详见：http://www.w3school.com.cn/css/css_selector_attribute.asp

 

p[class="important warning"]{color: red;}

<p class="important warning">This is a paragraph.</a>

 

后代选择器（空格分隔）

也称为上下文选择器，比如你想选中div节里的h1，而非外部的h1，则应该这样：

div h1 {color:red;}需要注意的是两个元素之间的层次间隔可以是无限的，即h1可能是div的孙元素。

 

子选择器( > )

如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器.

div>h1 {color:red;}

 

伪类

用于向某些选择器添加特殊的效果。

:active向被激活的元素添加样式。

:focus向拥有键盘输入焦点的元素添加样式。

:hover当鼠标悬浮在元素上方时，向元素添加样式。

:link向未被访问的链接添加样式。

:visited向已被访问的链接添加样式。

:first-child向元素的第一个子元素添加样式。

:lang向带有指定 lang属性的元素添加样式。

 

伪元素

:first-letter向文本的第一个字母添加特殊样式。

:first-line向文本的首行添加特殊样式。

:before在元素之前添加内容。

:after在元素之后添加内容。

 

杂项

多个选择器以","分隔，表示或的意思；空格分隔的选择器表示后者是前者的子孙。