CSS Selector collation

A lot of people think CSSEspecially simple, but actually really write well CSSNot easy, CSSEach point is actually a lot of content, take the selector, CSSSelectors can be divided into five categories:

• Element Selector

• Relationship Selector

• Property Selector

• Pseudo class Selector

• Pseudo-Object selectors

Element Selector

Selector

Selector	name	Description
*	A wildcard selector	Select all the Elements
E	Element Selector	Select the specified element
#idName	ID Selector	Select an element with an id attribute equal to Idname
.className	Class Selector	Select the Class property that contains the ClassName element

Element selectors are often used as long as they are written, and the CSS content of this piece is very simple, nothing special to say.

Relationship Selector

Selector

Selector	name	Description
E F	Include selector	Select all f elements contained within the E element
E>F	Child Selector	Select all the child elements of the E element f
E+F	Adjacent selector	Select the F element that adheres to the E element
E~F	Brother Selector	Select e element all sibling element F

Here are a few things to note:

• The child selector can only select the word element, not the grandchild, and the inclusion selector will select all eligible descendants, including the son, grandson, grandson ...

• The adjacent selector selects only adjacent sibling elements that match the criteria, and the sibling selector selects all sibling elements that match the condition, not the immediate element.

• With Android browser4.2.* and below, pseudo-class selectors with :checked sibling selectors there will be a bug to see the details.

Property Selector

Selector

Selector	Description
E[att]	Select the e element with the ATT attribute
E[att="val"]	Select the e element with the ATT attribute and the attribute value equal to Val
E[att~="val"]	Select the E element that has the ATT attribute and one of the attribute values equal to Val (with only one value and that value equals Val)
E[att|="val"]	Select the E element that has the ATT attribute with a string that starts with a Val and is delimited with a connector, and is - selected if the property value is only Val
E[att^="val"]	Select the e element with the ATT attribute and the property value as a string starting with Val
E[att$="val"]	Select the e element with the ATT attribute and the property value as a string ending in Val
E[att*="val"]	Select the e element with the ATT attribute and the property value as a string containing Val

Pseudo class Selector

Selector

Selector	Description
E:link	To set the style of hyperlink a before it is accessed
E:visited	Set hyperlink a style whose link address has been accessed out of date
E:hover	Sets the style of the element when the mouse hovers over it
E:active	Sets the style of an element when it is activated by the user (an event that occurs between mouse clicks and releases)
E:focus	Sets the style of the element when it becomes the input focus (the onfocus event of the element occurs). (typically applied to form elements)
E:checked	Matches the selected element e in the user interface. (used when input type is radio and checkbox)
E:enabled	Matches the element e that is in the available state on the user interface. (typically applied to form elements)
E:disabled	Matches element E in the disabled state on the user interface. (typically applied to form elements)
E:empty	Matches elements that do not have any child elements (including text nodes) E
E:root	Matches the E element in the document's root element. In HTML, the root element is always html
E:not(s)	Matches elements that do not contain s-selectors E
E:first-child	Matches the first child element of a parent element E
E:last-child	Matches the last child element of the parent element E
E:only-child	Matches only one child element of the parent element E
E:nth-child(n)	Matches the nth child element of the parent element E
E:nth-last-child(n)	Matches the parent element's reciprocal nth child element E
E:first-of-type	Matches the first sibling element in the same type E
E:last-of-type	Matches the last sibling element in the same type E
E:only-of-type	Matches only one sibling element in the same type E
E:nth-of-type(n)	Match nth sibling in same type E
E:nth-last-of-type(n)	Matches the reciprocal nth sibling in the same type E

Precautions:

• 4 States of hyperlinks (pre-access, mouse hover, currently clicked, visited), need to have a specific writing order to take effect;A:hover must be located after A:link and a:visited, a:active must be behind A:hover .

• E:first-childA selector, E must be the first element in its sibling element, in other words, E must be the first child of the parent element. Similar pseudo-class also has E:last-child , but the situation is just the opposite, need it is the last child element.

About :not() the usage

Suppose there is a list, each list item has a bottom edge, but the last item does not require a bottom edge.

Li:not (: last-child) {    border-bottom:1px solid #ddd;}

The above code means: Add a bottom edge to all list items except the last one in the list. is not very convenient.

About :nth-child() the usage

To make it E:nth-child(n) effective, the E element must be a child of an element, and the parent of E is the body, that is, E can be a child of the body. , and, the :first-child :last-child :only-child :nth-last-child(n) same.
nth-child(n)The n in parentheses can be a number, a keyword, or a formula.

: Nth-child (length)/* parameter is a specific number length is an integer */:nth-child (n)/* parameter is n,n from 0 to calculate */:nth-child (n*length)/*n multiple selection, n from 0 count */: Nth-child (n+length)/* Select elements greater than or equal to length */:nth-child (-n+length)/* Select elements less than or equal to length before */:nth-child (n*length+1)/* */:nth-child (2n)/: Nth-child (even)//= even */:nth-child (2n+1)/: Nth-child (odd)//= odd */

About :...-child and :...-of-type the difference

The properties of these two series are really similar, and it can be difficult to distinguish between people who are unfamiliar.

E:first-of-type You can always hit the 1th child of the parent element, regardless of whether the 1th child element of the parent element is E, and E:first-child the e element in it must be the first element in its sibling element, otherwise the match is invalidated. E:last-of-type with the E:last-child same.
E:nth-of-type(n)Can always hit the parent element's nth child element E, regardless of whether the parent element n child element is e E:nth-child(n) , and the parent element's nth child element E, if the nth child element is not E, it is an invalid selector, but n is incremented.
About :nth-child() :nth-of-type() The difference can see this article

Use to :empty distinguish between empty elements

Select the P element that does not contain child elements:

P:empty

Select the P element that contains the child elements:

P:not (: Empty)

Pseudo-Object selectors

Selector

Selector	Description
E:before/E::before	The content that is inserted before the target element E. Used in conjunction with the Content property
E:after/E::after	The content that is inserted after the target element E. Used in conjunction with the Content property
E:first-letter/E::first-letter	Sets the style of the first character within an element
E:first-line/E::first-line	Sets the style of the first row within an element
E::placeholder	Sets the style of the element literal placeholder. (typically used in input boxes)
E::selection	Sets the font color and background color when the element is selected

Precautions:

• ::placeholderYou need to prefix each browser when you use it, except Firefox ::[prefix]placeholder , which is used by other browsers ::[prefix]input-placeholder .

Summarize

A good selection actually allows us to have a lot less code. In fact, there are some things do not start to say, such as :before and :after , behind the special write an article.

Many people feel CSS particularly simple, but in fact it CSS is not easy to write well, CSS each point in fact, the content is a lot, take the selector, the CSS selector can be divided into five categories:

• Element Selector

• Relationship Selector

• Property Selector

• Pseudo class Selector

• Pseudo-Object selectors

Element Selector

Selector

Selector	name	Description
*	A wildcard selector	Select all the Elements
E	Element Selector	Select the specified element
#idName	ID Selector	Select an element with an id attribute equal to Idname
.className	Class Selector	Select the Class property that contains the ClassName element

Element selectors are often used as long as they are written, and the CSS content of this piece is very simple, nothing special to say.

Relationship Selector

Selector

Selector	name	Description
E F	Include selector	Select all f elements contained within the E element
E>F	Child Selector	Select all the child elements of the E element f
E+F	Adjacent selector	Select the F element that adheres to the E element
E~F	Brother Selector	Select e element all sibling element F

Here are a few things to note:

• The child selector can only select the word element, not the grandchild, and the inclusion selector will select all eligible descendants, including the son, grandson, grandson ...

• The adjacent selector selects only adjacent sibling elements that match the criteria, and the sibling selector selects all sibling elements that match the condition, not the immediate element.

• With Android browser4.2.* and below, pseudo-class selectors with :checked sibling selectors there will be a bug to see the details.

Property Selector

Selector

Selector	Description
E[att]	Select the e element with the ATT attribute
E[att="val"]	Select the e element with the ATT attribute and the attribute value equal to Val
E[att~="val"]	Select the E element that has the ATT attribute and one of the attribute values equal to Val (with only one value and that value equals Val)
E[att|="val"]	Select the E element that has the ATT attribute with a string that starts with a Val and is delimited with a connector, and is - selected if the property value is only Val
E[att^="val"]	Select the e element with the ATT attribute and the property value as a string starting with Val
E[att$="val"]	Select the e element with the ATT attribute and the property value as a string ending in Val
E[att*="val"]	Select the e element with the ATT attribute and the property value as a string containing Val

Pseudo class Selector

Selector

Selector	Description
E:link	To set the style of hyperlink a before it is accessed
E:visited	Set hyperlink a style whose link address has been accessed out of date
E:hover	Sets the style of the element when the mouse hovers over it
E:active	Sets the style of an element when it is activated by the user (an event that occurs between mouse clicks and releases)
E:focus	Sets the style of the element when it becomes the input focus (the onfocus event of the element occurs). (typically applied to form elements)
E:checked	Matches the selected element e in the user interface. (used when input type is radio and checkbox)
E:enabled	Matches the element e that is in the available state on the user interface. (typically applied to form elements)
E:disabled	Matches element E in the disabled state on the user interface. (typically applied to form elements)
E:empty	Matches elements that do not have any child elements (including text nodes) E
E:root	Matches the E element in the document's root element. In HTML, the root element is always html
E:not(s)	Matches elements that do not contain s-selectors E
E:first-child	Matches the first child element of a parent element E
E:last-child	Matches the last child element of the parent element E
E:only-child	Matches only one child element of the parent element E
E:nth-child(n)	Matches the nth child element of the parent element E
E:nth-last-child(n)	Matches the parent element's reciprocal nth child element E
E:first-of-type	Matches the first sibling element in the same type E
E:last-of-type	Matches the last sibling element in the same type E
E:only-of-type	Matches only one sibling element in the same type E
E:nth-of-type(n)	Match nth sibling in same type E
E:nth-last-of-type(n)	Matches the reciprocal nth sibling in the same type E

Precautions:

• 4 States of hyperlinks (pre-access, mouse hover, currently clicked, visited), need to have a specific writing order to take effect;A:hover must be located after A:link and a:visited, a:active must be behind A:hover .

• E:first-childA selector, E must be the first element in its sibling element, in other words, E must be the first child of the parent element. Similar pseudo-class also has E:last-child , but the situation is just the opposite, need it is the last child element.

About :not() the usage

Suppose there is a list, each list item has a bottom edge, but the last item does not require a bottom edge.

Li:not (: last-child) {    border-bottom:1px solid #ddd;}

The above code means: Add a bottom edge to all list items except the last one in the list. is not very convenient.

About :nth-child() the usage

To make it E:nth-child(n) effective, the E element must be a child of an element, and the parent of E is the body, that is, E can be a child of the body. , and, the :first-child :last-child :only-child :nth-last-child(n) same.
nth-child(n)The n in parentheses can be a number, a keyword, or a formula.

: Nth-child (length)/* parameter is a specific number length is an integer */:nth-child (n)/* parameter is n,n from 0 to calculate */:nth-child (n*length)/*n multiple selection, n from 0 count */: Nth-child (n+length)/* Select elements greater than or equal to length */:nth-child (-n+length)/* Select elements less than or equal to length before */:nth-child (n*length+1)/* */:nth-child (2n)/: Nth-child (even)//= even */:nth-child (2n+1)/: Nth-child (odd)//= odd */

About :...-child and :...-of-type the difference

The properties of these two series are really similar, and it can be difficult to distinguish between people who are unfamiliar.

E:first-of-type You can always hit the 1th child of the parent element, regardless of whether the 1th child element of the parent element is E, and E:first-child the e element in it must be the first element in its sibling element, otherwise the match is invalidated. E:last-of-type with the E:last-child same.
E:nth-of-type(n)Can always hit the parent element's nth child element E, regardless of whether the parent element n child element is e E:nth-child(n) , and the parent element's nth child element E, if the nth child element is not E, it is an invalid selector, but n is incremented.
About :nth-child() :nth-of-type() The difference can see this article

Use to :empty distinguish between empty elements

Select the P element that does not contain child elements:

P:empty

Select the P element that contains the child elements:

P:not (: Empty)

Pseudo-Object selectors

Selector

Selector	Description
E:before/E::before	The content that is inserted before the target element E. Used in conjunction with the Content property
E:after/E::after	The content that is inserted after the target element E. Used in conjunction with the Content property
E:first-letter/E::first-letter	Sets the style of the first character within an element
E:first-line/E::first-line	Sets the style of the first row within an element
E::placeholder	Sets the style of the element literal placeholder. (typically used in input boxes)
E::selection	Sets the font color and background color when the element is selected

Precautions:

• ::placeholderYou need to prefix each browser when you use it, except Firefox ::[prefix]placeholder , which is used by other browsers ::[prefix]input-placeholder .

Summarize

A good selection actually allows us to have a lot less code. In fact, there are some things do not start to say, such as :before and :after , behind the special write an article.