CSS (CSS3) selector (2)

This section is primarily a new selector for CSS3

Next CSS (CSS3) selector (1)

I. General Brotherhood selector:

:e ~ F, matches the sibling F element after any e element.

div ~ p{    Background-color: #00FF00;}

Two. Property selector:

:E[att ^= Val], matches the attribute of the ATT value to the element that begins with "Val".

[ID ^= start]{    background-color:red;] /* matches the value of the id attribute to start with, such as id= "Start1", id= "Start2", id= "Start3" element */

E[att $= Val], the element that matches the attribute att value ending with "Val".

[ID $= end]{    background-color:red;] /* matches the value of the id attribute ending with end, such as id= "1end", id= "2end", id= "3end" element */

E[att *= Val], the value of the match attribute att contains the element of the "Val" string.

[ID $= hass]{    background-color:red;] /* matches the value of the id attribute containing Hass, such as id= "1hass", id= "Hass2", id= "3hass444" element */

Three. Structural pseudo-Class selector:

e:root: matches the root element of the document, which is the HTML element for the HTML document. (That is, there may be other document forms to use, and the root element of the document type is selected)

: root{    background:red;} /* after testing, the notation like Div:root is invalid. */

E:not: Matches any element that does not conform to the current selector.

h1:not (. Name) {    color:red;} /* The implication is that the class name that matches all H1 elements is not the H1 element of name, if: an element that is not preceded by the not selector is invalid */

:e:empty, matches an element that does not contain any child elements, including the text node .

. box:empty{    Background:pink;}

To:E:target, match the specific "id" in the document, click on the effect.

: target{    background:red;} /* the target point style that is typically used for anchor point positioning */

e:last-child: Matches the last child element of the parent element.

li:last-child{    background-color:red;}

e:nth-child (n), which matches the nth child element of its parent element, starting at 1.

Li:nth-child (2) {    background-color:red;}

Li:nth-child (Odd) {    background-color:red;} 

e:nth-last-child (n), which matches the reciprocal nth child element of its parent element, the index of the first countdown is 1.

Li:nth-last-child (2) {    background-color:red;}

Li:nth-last-child (even) {    background-color:red;} 

e:nth-of-type (n), similar to: Nth-child (), but only matches elements of the same type.

h2:nth-of-Type (odd) {    background:red;}

e:nth-last-of-type (n), similar to: Nth-last-child (), but only matches elements of the same type.

h2:nth-last-of-Type (even) {    background:red;}

Panax Notoginseng:e:first-of-type, matches the first child element of the same label under the parent element.

h2:first-of-type{    background-color:yellow;}

E:last-of-type: Matches the last child element of the same label under the parent element.

h2:last-of-type{    background-color:yellow;}

e:only-child: Matches the only child element under the parent element, equivalent to: First-child:last-child or: Nth-child (1): Nth-last-child (1).

li:only-child{    background-color:yellow;}

Max:E:only-of-type, the only child element that matches the same label under the parent element, is equivalent to: First-of-type:last-of-type or: Nth-of-type (1): Nth-last-of-type (1).

li:only-of-type{    background-color:yellow;}

Four. UI element State pseudo-class selector:

e:enabled: Matches the active element in the form.

Input[type="text"]:enabled{    background-color:yellow;

e:disabled: matches the disabled element in the form.

Input[type="text"]:d isabled{    background-color:purple;}

e:read-only: Specifies the style when the element is in a read-only state.

Input[type="text"]:read-only{        background-color:gray;}

e:read-write: Specifies the style when the element is in a non-read-only state.

Input[type="text"]:read-write{        background-color:greenyellow;}

e:checked: Matches the selected radio (radio box) or checkbox (checkbox) element in the form.

Input[type="checkbox"]:checked  {    outline:2px solid blue;}

E:default: Specifies the style of a radio box or check box control that is selected by default when the page is opened. It is important to note that the style is still valid even if the user sets the selection state of the Radio box or check box to a non-selected state.

Input[type="checkbox"]:default  {    outline:2px solid  Blue ;}

E:indeterminate, specifies that when a page is open, there is no single box in a set of radio boxes that is set to the selected state, the style of the entire set of radio boxes, and the style is canceled if the user selects any one of the radio boxes.

Input[type="radio"]:indeterminate{        outline:solid 3px Blue;}

e::selection: The style used to specify when the element is selected.

p::selection{    background:red;    Color: #FFF;} Input[type="text"]::selection{    background:gray;    Color: #FFF;}

E:invalid, which specifies that the content of an element cannot be specified by the properties of the H5 element (required) or the content of the element does not conform to the specified format (type=email, etc.).

Input[type="text"]:invalid{    background-color:red;

:e:valid, which specifies that the contents of an element can be specified by the properties of the H5 element (required) or the contents of the element do not conform to the specified format (type=email, etc.).

Input[type="text"]:valid{    background-color:white;

e:required, which specifies the style of the input,select,textarea element that is allowed to use the required property and has specified the Required property.

Input[type="text"]:required{    Border-color:red;    Border-width:3px;}

e:optional: Specifies the style of the Input,select,textarea element that allows the use of the required property and does not specify a required property.

Input[type="text"]:optional{    Border-color:black;    Border-width:3px;}

E:in-range, which specifies the style that is used when a valid value of an element is limited to a certain range (usually defined by the Min attribute value or the max attribute value) and the actual input value is within that range.

Input[type="number"]:in-range{    background-  Color:white;}

E:out-of-range, which specifies the style that is used when a valid value of an element is limited to a certain range (usually by the Min attribute value or the max attribute value) and the actual input value is not within that range.

Input[type="number"]:out-of-range{    background-color:red;}

:E::p laceholder, used to change the style of the text placeholder.

Input::p laceholder{    color:red;}

At this point, the CSS (CSS3) Selector of the simple instructions to the end of this, in fact, these content contains the CSS (CSS3) The majority of the world's most common selectors, of course, there are some less common if you are interested, you can search for information on their own.

Reference: CSS selector notes, 30 CSS selectors you must memorize, mdn-docs-selector introduction, HTML5 and CSS3 authoritative Guide (3rd edition under book-Lu Ling Niu) 19th, before and after pseudo-element usage.

CSS (CSS3) selector (2)