CSS3 selector and css3 Selector

CSS3 selector and css3 Selector

● Attribute Selector
E [att ^ = "val"] // select the Matching Element starting with the att attribute value val in the E element.
E [att $ = "val"] // select the Matching Element ending with the att attribute value val in the E element.
E [att * = "val"] // select the Matching Element in which the att attribute value contains the character val in the E element.

● Root Selector
: Root: select the html Tag Element.

● Negative Selector
Div: not ([id = "box"])
// Select the child element of other div except the id box

● Empty Selector
Div: empty
// Select elements without any content (including those without spaces)
All the empty div elements of the div label type in the current html document are selected.

● Target Selector
Target: target
// Works with tag
For example, click tag a to set the background color of the div to red.
# Div: target {background: red ;}
<Div id = "div">
<A href = "# div"> div </a>
</Div>

● Eldest son Selector
Div: first-child
// Select the first child element under the div

● Last child Selector
Div: last-child
// Select the Ending Child element as shown in the preceding figure.
NOTE: If different types of elements exist in the same container, the elements of the type to be selected cannot be selected if there are non-Selected elements before and after the last child selector of the eldest son.
Example:
<Div>
<Div> 0 </div>
<P> 1 </p>
<P> 2 </p>
</Div>
Div> p: first-child {}
Div> p: last-child {}
The first child selector is invalid. Similarly, if there are other labels at the end, the last child selector will also be invalid.

● Forward multi-Selector
Nth-child (n) // n can be an integer or an expression. When n is calculated from 0 and n is an integer, 0 is calculated from 1. No element is selected. n can also be a keyword (odd number even ). even)
Example:
Ol> li: nth-child (2n-1) {background: red ;}
<Ol>
<Li> item1 </li>
<Li> item2 </li>
<Li> item3 </li>
<Li> item4 </li>
<Li> item5 </li>
<Li> item6 </li>
<Li> item7 </li>
<Li> item8 </li>
<Li> item9 </li>
<Li> item10 </li>
</Ol>
Select an odd number of rows 1 3 5 7 9
For example, 2n is used to select an even number of rows 2 4 6 8 10.
If n is an integer, only the nth row from top to bottom is selected.
Select multiple rows-n + 5 select five rows

● Reverse multi-Selector
: Nth-last-child (n)
// Same as above; opposite direction: select from bottom up

● Type eldest son Selector
Span: first-of-type
// Select the first span label under the parent Element
Note: If the first element in the parent level is not a span tag, no tag element is selected (that is, it does not work)

● Type last child Selector
Span: last-of-type
// Same as above, select the last span type label
Note: If the last label is not span, no tag element is selected.

● Forward type Selector
Span: nth-of-type (n)
// Select the nth span tag element of the same parent level for top-down Calculation
Note: It is similar to nth-child (n), but it only selects the same type of element. If n's target element is not of the same type, it does not take effect.

● Reverse type Selector
Span: nth-last-of-type (n) // same as above, opposite to direction

● Unique Selector
: Only-child
// Select the element with only one child element under the same parent Element
Example:
Div p: only-child {}
<Div>
<Div>
<P> </p>
</Div>
<Div>
<P> </p>
<P> </p>
</Div>
</Div>
Note: Only child elements with only one p Tag Element are selected.

● Unique type Selector
: Only-of-type
// Same as above. A matching type is added, that is, the only child element of this type is applied.

● Form status Selector
Enabled
// In web forms, some form elements have the enabled and disabled statuses, such as the checkbox in the password box. By default, the status of these form elements is enabled.
Example:
Input: enabled {}
<Input type = "text"/>
<Input type = "text" disabled/>
Select 1st text boxes

Disabled
// Since enabled is available, there must be a status selector opposite to it.
Example:
Input: disabled {}
<Input type = "text"/>
<Input type = "text" disabled/>
Select 2nd text boxes

● Selected status Selector
Checked
// In the form element, there are also elements such as the check box single button, which have the selected and unselected states
Example:
Input: checked {}
<Input type = "checkbox"/>
Note: The selected style will be applied when the user clicks the selected style.

● Read-only status Selector
: Read-only {}
// Select the read-only element and set the style for it
That is, readonly = "readonly" is set in the element"

● Non-read-only status Selector
: Read-write {}
Opposite to read-only, that is, the elements in the non-read-only status are selected.

The following is a pseudo-element selector --------------------------------------------------------------------------------------------------------------

● Text status Selector
: Selection
The selected text segment is displayed in a blue-colored style when the webpage is selected. This selector selects the selected text and sets a style for the selected text through this pseudo element.
Example:
Div: selectioin {color: blue; background: red ;}
<Div> the selected text is highlighted in red </div>

● Content insertion Selector
: Before {}
Insert content before the element
Example:
P: before {content: "123"; color: red; background: blue ;}
<P> abc </p>
Insert 123 of the blue background of the red letter in front of the p tag.

: After {}
Insert content after the element, opposite to the before insert position