这里主要是参考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” 子串的每个 元素。先整理这些常用的，以后再添加扩充。
