CSS selector summary, css Selector

CSS selector summary, css Selector

This article introduces the usage and summary of css3 selector, including general selector, attribute selector, pseudo class selector, for more information about css selectors, refer to this article.

A general Selector

1 * {} wildcard selector (CSS2): Applicable to All element objects.
2 E type (HTML) selector (CSS1): uses the DOM of the document language object type as the selector.
3 E # myid is the id selector (CSS1): use the E object with the unique identifier id property equal to myid as the selector.
4 E. myclass is the class selector (CSS1): Use the class attribute to include the E object of myclass as the selector.
5 e f: contains the selector (CSS1): Selects all F elements contained by the Eelement.

The common selector added by CSS3: the common selector of the same level element:

1. General selector E ~ F {}: matches all the F and EF at the same level after the E element. As long as F is behind E, E is just a reference. E ~ F {background: # ff0 ;}
2 adjacent (adjacent) selector (css2): E + F {}: EF elements are adjacent, that is, F elements are selected after the Eelement.
3 contains (sub) selector (css2): E> F {}: EF can not be substituted, and E can only match to the next adjacent generation F.

 

Binary Attribute Selector

1. E [att ^ = "val"]: select an Eelement of a string with the att attribute and the attribute value starting with val.
2. E [att $ = "val"]: select an Eelement with the att attribute and the attribute value is a string ending with val.
3. E [att * = "val"]: select an Eelement with the att attribute and the attribute value is a string containing the val.
4. E [att | = "val"] select the Eelement of a string with the att attribute and the attribute value starting with val and separated with the connector.
5. E [att] Select an Eelement with the att attribute.
6. E [att = "val"] Select an Eelement with the att attribute and the attribute value is equal to val.
7. E [att ~ = "Val"] Select a list of words with the att attribute and the attribute value is a space-separated word list, with an Eelement equal to val.
Note: 4 ~ 7 is a property unique to CSS2. The most common attribute selector of input.

 

Triplicate Selector

1. pseudo classes related to the user interface:
(1) E: enabled: matches the activated elements in the form and the operable elements in the form.
(2) E: disabled (commonly used): it is used to match the disabled element disabled = "disabled" in a form ". Eg: input [type = "text"]: disabled {background: # ddd;} can only be viewed as unavailable.
(3) E: checked: matches the selected radio (single-choice) or checkbox (check box) elements in the form.
Is the overall pseudo class (matching the entire DOM document ):
(4): The selection matches the selected elements of the user, that is, the color of the selected object. : Selection.

2. Structured pseudo-classes

1): root matches the root element of the document. For HTML documents, only HTML root elements can be matched.
2) E: nth-child (n) matches its current element.
E: nth-child (n): matches the nth child element of its parent Element E. The first child element is 1.
E f: nth-child (n): matches the nth F element of the parent Element E, and the first number is 1 (it seems only available for ul)
3) E: nth-last-child (n): matches the nth child element of the parent element. The first child element is numbered 1.
E: last-child: matches the last child element of the parent element, which is equivalent to nth-last-child (1 ).
4) E: nth-of-type (n): it is similar to nth-child (n), but only matches the elements that use the same label.
5) E: nth-last-of-type (n): it is similar to nth-last-child (n), but only matches the elements that use the same label.
6) E: first-of-type: match the first child element that uses the same label under the parent element, equivalent to: nth-of-type (1 ).
7) E: last-of-type: matches the last child element that uses the same label under the parent element, which is equivalent to nth-last-of-type (1 ).
8) E: only-child: matches only one child element of the parent element ..
9) E: only-of-type: matches the unique child element under the parent element that uses the same tag, which is equivalent to: first-of-type,: last-of-type or: nth-of-type (1),: nth-last-of-type (1 ).
10) E: empty matches an element that does not contain any child element. Note that text nodes are also considered as child elements, and blank nodes are also considered as child nodes.
11) E: not (s) matches any element that does not match the current selector: not (: nth-child (1 )).
 

3. Link pseudo-class selector

1) E: link {}: link pseudo-class selector. Set the style of Hyperlink a before being accessed.
2) E: visited {}: link pseudo-class selector. Set the style of Hyperlink a when its link address has been accessed.
3) E: hover {}: Specifies the pseudo-class selector for user operations, and sets the style of an element when it is hovering over it.
4) E: active {}: user operation pseudo class selector, set the style of the element when it is activated by the user (events occurred between mouse clicks and release.
5) E: focus {} user operation pseudo class selector, set the style of the element when it becomes the input focus (the onfocus event of this element occurs.
6) E: lang {}: pseudo class selector, matching the Eelement in a special language.

CSS3 Selector

In CSS, a selector is a pattern used to select elements that require adding styles.

The "CSS" column indicates the CSS version in which the attribute is defined. (CSS1, CSS2, or CSS3 .)

Selector	Example	Example	CSS
.Class	. Intro	Select all class = "intro" Elements	1
#Id	# Firstname	Select All id = "firstname" Elements	1
*	*	Select all elements	2
Element	P	Select all <p> Elements	1
Element, element	Div, p	Select all <div> elements and <p> Elements	1
Element Element	Div p	Select all <p> elements in <div> element	1
Element>Element	Div> p	Select the <p> element of the <div> element for all parent levels.	2
Element+Element	Div + p	Select all <p> elements followed by <div> Elements	2
[Attribute]	[Target]	Select all elements with the target attribute	2
[Attribute=Value]	[Target =-blank]	Select all elements using target = "-blank"	2
[Attribute~ =Value]	[Title ~ = Flower]	Select all elements whose title attribute contains the word "flower"	2
[Attribute| =Language]	[Lang | = en]	Select all elements of the starting value of a lang attribute = "EN"	2
: Link	A: link	Select All unaccessed links	1
: Visited	A: visited	Select All accessed links	1
: Active	A: active	Select activity Link	1
: Hover	A: hover	When you select mouse over the link	1
: Focus	Input: focus	Select an input element with focus	2
: First-letter	P: first-letter	Select the first letter of each <P> element.	1
: First-line	P: first-line	Select the first line of each <P> element.	1
: First-child	P: first-child	Specifies that only the <p> element is the first child style of its parent.	2
: Before	P: before	Insert content before each <p> element	2
: After	P: after	Insert content after each <p> element	2
: Lang (Language)	P: lang (it)	Select all <p> elements of a lang attribute whose start value is "it ".	2
Element1~Element2	P ~ Ul	Select every ul element after the p element	3
[Attribute^ =Value]	A [src ^ = "https"]	Select an element whose src attribute value starts with "https"	3
[Attribute$ =Value]	A [src $ = ". pdf"]	Select the elements whose values of each src attribute end with ". pdf"	3
[Attribute* =Value]	A [src * = "44lan"]	Select an element whose src attribute value contains the sub-string "44lan"	3
: First-of-type	P: first-of-type	Select each p element as the first p element of its parent.	3
: Last-of-type	P: last-of-type	Select each p element as the last p element of its parent.	3
: Only-of-type	P: only-of-type	Select each p element as the unique p element of its parent.	3
: Only-child	P: only-child	Select each p element as the unique child element of its parent.	3
: Nth-child (N)	P: nth-child (2)	Select each p element as the second child element of its parent.	3
: Nth-last-child (N)	P: nth-last-child (2)	Select the second child element of the parent level for each p element and count it from the last child item.	3
: Nth-of-type (N)	P: nth-of-type (2)	Select the second p element whose parent is each p element.	3
: Nth-last-of-type (N)	P: nth-last-of-type (2)	Select the second p element of the parent level for each p element and count it from the last subitem.	3
: Last-child	P: last-child	Select each p element as the last child of its parent.	3
: Root	: Root	Select the document root element	3
: Empty	P: empty	Select each p element without any child level (including text nodes)	3
: Target	# News: target	Select the # news element of the current activity (the URL of the click that contains the anchor name)	3
: Enabled	Input: enabled	Select an enabled input element	3
: Disabled	Input: disabled	Select a disabled input element	3
: Checked	Input: checked	Select each selected input element	3
: Not (Selector)	: Not (p)	Select an element that is not a p element	3
: Selection	: Selection	The selected or highlighted part of the matching element.	3
: Out-of-range	: Out-of-range	The input element that matches values outside the specified range.	3
: In-range	: In-range	The input element of the matching value within the specified range.	3
: Read-write	: Read-write	Used to match readable and writable Elements	3
: Read-only	: Read-only	Used to match the elements that set the "readonly" (read-only) Attribute	3
: Optional	: Optional	Used to match optional input Elements	3
: Required	: Required	Used to match the elements with the "required" attribute	3
: Valid	: Valid	Used to match elements with valid input values	3
: Invalid	: Invalid	Used to match an element whose input value is invalid.	3

 

Address: http://www.manongjc.com/article/716.html

Read about css selector:

Understanding of CSS selector priority (weight)

Css Tag selector, id selector, and class selector instance

CSS selector types and usage

Introduction and example of css series selector and descendant Selector

CSS selector details

Examples of pseudo selector usage in CSS

Logic processing in the CSS Selector

CSS selector priority

Css tall selector: nth-child () application instance

CSS selector details