CSS pseudo-class selector is used to add some special effects.
grammar
Pseudo-class syntax:
selector:pseudo-class {property:value;}
CSS classes can also use pseudo-classes:
selector.class:pseudo-class {property:value;}
anchor pseudo-class
CSS support in browsers, different state of the link can be displayed in different ways
Examples
a: link {color: # FF0000;} / * Link unvisited * / a: visited {color: # 00FF00;} / * link has visited * / a: hover {color: # FF00FF;} / * mouse designated over link * / a: active {color: # 0000FF;} / * selected link * /
Note: In the CSS definition, a: hover must be placed a: link and a: After visited, is effective.
Note: CSS definition, a: active must be placed in a: hover after, is valid.
Note: The name of the pseudo-class case insensitive.
Pseudo-classes and CSS Classes
Pseudo-classes can be used with CSS classes:
{Color a.red:visited: # FF0000;} the CSS syntax
If the link has been visited in the example above, it will be displayed in red.
CSS: first-child pseudo-class
You can use the: first-child pseudo-class selects the first child of the parent element.
Note: you must be declared in the previous version of IE8, this: first-child to take effect.
The first match
element
In the following example, the selector matches any element as the first child element
element:
Examples
p:first-child { color:blue; }
All matches
The first element of the elements
In the following example, all the selected match
The first element of the elements:
Examples
p > i:first-child { color:blue; }
Match all of the first subelement
All elements element
In the following example, the selector matches any first child element of the element as a
All elements elements:
Examples
p:first-child i { color:blue; }
CSS -: lang pseudo-class
: Lang pseudo-class so that you have the ability to define specific rules in different languages
Note: IE8 must be declared to support; lang pseudo-class.
In the following example,: lang no class type of the attribute value q quotes element definition:
Examples
q:lang(no) {quotes: "~" "~";}
All CSS pseudo-classes / elements
Example illustration selector
: Checkedinput: checked all selected form element
: Disabledinput: disabled Selects all form elements disabled
: Emptyp: empty Select all p element has no child elements
: Enabledinput: enabled Selects all enabled form elements
: First-of-typep: first-of-type parent element is selected for each sub-element of the first p element p
: In-rangeinput: in-range within the specified range of elements selected value
: Invalidinput: invalid invalid select all the elements
: Last-childp: last-child selects the last child element of all p elements
: Last-of-typep: last-of-type selecting each p element is the last element of a parent element p
: Not (selector): not (p) to select all elements other than p
: Nth-child (n) p: nth-child (2) selecting a parent element for all the elements of the second p subelement
: Nth-last-child (n) p: nth-last-child (2) to select all elements of the inverse of the second p subelement
: Nth-last-of-type (n) p: nth-last-of-type (2) to select all the elements p is the reciprocal of the second sub-element p
: Nth-of-type (n) p: nth-of-type (2) to select all elements of the second p-p of sub-elements
: Only-of-typep: only-of-type Selects all just a sub-element of the element p
: Only-childp: only-child select all p elements with only one child element
: Optionalinput: optional choice is not "required" attribute of the element
: Out-of-rangeinput: out-of-range of the selected element attribute values outside the specified range
: Read-onlyinput: read-only attribute read-only attribute of the selected element
: Read-writeinput: read-write read-only property does not select the element properties
: Requiredinput: required choose "required" attribute specifies the element properties
: Rootroot select the root element of the document
: Target # news: target selection currently active #news elements (click on the URL contains the name of the anchor)
: Validinput: valid for all valid values of selected properties
: Linka: link Select all unvisited links
: Visiteda: visited Select all visited links
: Activea: active choice is an active link
: Hovera: hover the mouse on the link status
: Focusinput: After selecting an input element having focus focus
: First-letterp: first-letter selected each
The first element of a letter
: First-linep: first-line choice for each
The first row elements
: First-childp: first-child selector matches any element belonging to the first child of
element
: Beforep: before in each
Inserting content before an element
: Afterp: after in each
Inserting content after an element
:lang(language)p:lang(it)为
lang attribute select elements of a start value
(Editor: Leilin Peng Source: network intrusion deleted)