In addition to id (#), class (.), attribute ([]), the element selection of CSS also includes pseudo-classes and pseudo-elements. Unlike id selectors, class selectors, attribute selectors, etc., which get elements from the html document hierarchy, pseudo-classes and pseudo-elements are predefined and independent of document elements, and the way they get elements is not based on id. , class, and attributes are the basic element characteristics, but the element in a special state (pseudo-class), or the special content in the element (pseudo-element). The representations of pseudo-classes and pseudo-elements are also distinguished from other selectors using ":" (English colon).
1. Basic selector
* Generic element selector, matching any element
p tag element selector, matching all elements using p tag
.info class selector, matches all elements whose class contains info
#msg id selector, matches all elements with id msg
2. Multi-element combination selector
div , p multi-element selector, matching all div elements or p elements at the same time, separated by commas between div and p
.info span descendant element selector, matches all span elements that are descendants of the info element, separated by a space between info and span
ul>li child element selector, matching all child elements li of ul elements
p+p is adjacent to the element selector, matching all sibling elements p immediately following the p element
3 attribute selectors
E[att] matches all E elements with att attribute, regardless of its value
E[att=val] matches all E elements whose att attribute is equal to "val"
E[att~=val] matches all E elements whose att attribute has multiple space-separated values, one of which is equal to "val"
E[att|=val] matches all att attributes with multiple hyphen-separated values, one of
实例：
p[title] { color:#f00; }
div[class=error] { color:#f00; }
td[headers~=col1] { color:#f00; }
p[lang|=en] { color:#f00; }
blockquote[class=quote][cite] { color:#f00; }
4 pseudo-classes
Shoddy in css2:
ol:first-child matches the first child of the parent element
p:link matches all unclicked links
p:visited matches all links that have been clicked
li:active matches li elements the mouse has been pressed on but not released
li:hover matches li elements the mouse is hovering over
li :focus matches the li element that has the current focus
li:lang(c) matches the li element whose lang attribute is equal to c
Example:
p:first-child { font-style:italic; }
Pseudo elements in css2:
E:first-line matches the first line of the E element
E:first-letter matches the first letter of the E element
E:before inserts the generated content before the E element
E:after inserts the generated content after the E element
Example:
p:first-line { font-weight:bold; color;#600; }
CSS 3中与用户界面有关的伪类
E:enabled 匹配表单中激活的元素
E:disabled 匹配表单中禁用的元素
E:checked 匹配表单中被选中的radio（单选框）或checkbox（复选框）元素
E::selection 匹配用户当前选中的元素
实例：
input[type="text"]:disabled { background:#ddd; }
::selection 选中文本来改变样式，它只在ie9以上的文本才能实现，在firefox中需要添加前缀“-moz”
CSS 3中的结构性伪类
E:root 匹配文档的根元素，对于HTML文档，就是HTML元素
E:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1
E:nth-last-child(n) 匹配其父元素的倒数第n个子元素，第一个编号为1
E:nth-of-type(n) 与:nth-child()作用类似，但是仅匹配使用同种标签的元素
E:nth-last-of-type(n) 与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素
E:last-child 匹配父元素的最后一个子元素，等同于:nth-last-child(1)
E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
E:last-of-type 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
E:only-child 匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type
或 :nth-of-type(1):nth-last-of-type(1)
E:empty 匹配一个不包含任何子元素的元素，注意：它是用来选择没有任何内容的元素（一个空格也不行）
注意：里面的n不能用其它字母代替只能是n，不然会没有任何效果。
实例：
p:nth-child(3) { color:#f00; }
p:nth-child(odd) { color:#f00; }
p:nth-child(even) { color:#f00; }
p:nth-child(3n+0) { color:#f00; }
p:nth-child(3n) { color:#f00; } 如果是-3n那就反向从最后一个开始
tr:nth-child(2n+11) { background:#ff0; } 这里的11是指从第11个开始计算
tr:nth-last-child(2) { background:#ff0; }
p:last-child { background:#ff0; }
p:only-child { background:#ff0; }
p:empty { background:#ff0; }
CSS 3的反选伪类
E:not(s) 匹配不符合当前选择器的任何元素
实例：
:not(p) { border:1px solid #ccc; }
在使用伪类的时候一定要注意兼容问题，ie8以下不兼容