CSS 选择器

这里主要是参考w3cschool，并加入了一些个人理解。如不喜欢可以移步w3cshcool
http://www.w3school.com.cn/cssref/css_selectors.asp

选择器	例子	例子描述
.class	.intro	选择 class=”intro” 的所有元素。
#id	#firstname	选择 id=”firstname” 的所有元素。
*	*	选择所有元素。
element	p	选择所有 p 元素。
element,element	div,p	选择所有 div元素和所有 p 元素。
elementelement	div p	选择 div 元素内部的所有p 元素。不只是子集p,孙子集p一样可以
element>element	div>p	选择父元素为 div 元素的所有 p元素。如果元素不是父元素的直接子元素，则不会被选择。
element+element	div+p	选择紧接在 div 元素之后的所有 p 元素。同级元素选择，这里只是选择到紧跟在div后的p，其他的p不选择。
[attribute]	[class]	选择带有 class属性所有元素。如果在前面加上a，例如a[class]则为所有带有class属性的a元素
[attribute=value]	[class=”test”]	选择 class=”test” 的所有元素。这里是完全匹配，class=”test test1”这种不会被选中
[attribute~=value]	[class~=”test”]	选择 class属性包含单词 “test” 的所有元素。这里的包含是完全匹配，即使是test1也不行。
[attribute|=value]	[lang|=en]	选择 lang 属性值以 “en” 开头的所有元素。这里的选择器只是会匹配例如：en-xxx，而不会匹配enxxx。所以尽量使用[attribute^=value]
:link	a:link	选择所有未被访问的链接。在链接没有被点击打开的时候的样式。这里要小心缓存，因为经测试，缓存会影响该选择器
:visited	a:visited	选择所有已被访问的链接。
:active	a:active	选择活动链接。经测试为鼠标按下的时候
:hover	a:hover	选择鼠标指针位于其上的链接。
:focus	input:focus	选择获得焦点的 input 元素。
:first-letter	p:first-letter	选择每个 p 元素的首字母。然后对每个p元素首字母进行设置
:first-line	p:first-line	选择每个 p 元素的首行。
:first-child	ul li:first-child	选择ul元素下的第一个子li元素。
:before	p:before	在每个 p 元素的内容之前插入内容。
:after	p:after	在每个 p 元素的内容之后插入内容。
:lang(language)	p:lang(it)	选择带有以 “it” 开头的 lang 属性值的每个 p 元素。
element1~element2	p~ul	选择前面有 p 元素的每个 ul 元素。
[attribute^=value]	a[src^=”https”]	选择其 src 属性值以 “https” 开头的每个 a 元素。
[attribute$=value]	a[src$=”.pdf”]	选择其 src 属性以 “.pdf” 结尾的所有 a 元素。
[attribute*=value]	a[src*=”abc”]	选择其 src 属性中包含 “abc” 子串的每个 元素。

先整理这些常用的，以后再添加扩充。