CSS selectors -- pseudo-classes, pseudo-elements

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


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


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 匹配一个不包含任何子元素的元素,注意:它是用来选择没有任何内容的元素(一个空格也不行)
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; }



Guess you like