Research on CSS3 selector and CSS3 Selector

Research on CSS3 selector and CSS3 Selector

Attribute Selector

[Title]: select an element with the title attribute

[Title = 'hello']: select an element whose attribute is title and whose value is hello.

[Title ~ = 'Hello']: select an element whose attribute is title and the part value is hello. "hello" must be a separate value separated by spaces.

[Title * = 'hello']: select a title attribute that contains the "hello" element.

[Title | = 'hello']: select a title attribute with a value starting with "hello" and allow any-character after "hello"

[Title ^ = 'hello']: any character whose attribute starts with "hello"

[Title $ = 'hello']: any character whose attribute ends with "hello"

[Title ^ = 'hello'] [title $ = '. py']: select an element whose attributes start with "hello" and end with ". py ".

 

Link character

H1 ~ P: select all peer p elements after the h1 Element

P ~ P: select all the same-level p elements after the p element, except the first p element

H1 + p: select the first p element of the same level after the h1 Element

 

Pseudo-class selector

Nth series, numbers

 

Nth-child (): calculates by location

Nth-of-type (): counts by type

Nth-last-child (): starts from the end by position.

Nth-last-of-type (): counts by type from the end

Use (-n + number) to specify the first few elements

-N will increase in the direction of negative numbers starting from 0,-1,-2,-3...

Use nth-child (odd) or nth-child (even) to change the color of the barrier.

 

Single choice

First-child: select the first element and press the position
First-of-type: select the first element, by type

 

Last-child: select the last element and press the position
Last-of-type: select the last element, by type

 

Only-child: It is selected when no other sibling element exists.
Only-of-type: You can have sibling elements, but different types are required.

Using only-of-type allows you to select an element from other type elements. On the contrary, only-child requires the element to exist independently. This certainly has a major effect to be discovered.

 

Pseudo class

 

: Target

Using the tab switch made by target, of course, it still has many defects, but you can use it to expand the extension.

: Empty
Select an element with no child element and no text node

: Root
Select the root element. In HTML, root is always an html element.

: Not
The parameter supports passing an element or other pseudo-class selector, but does not support passing a link character or pseudo element.
Select any element other than the specified parameter

: Optional

Select an input element that is not required

That is, the element that has no required attribute added to the input is obtained.

: Required

Select an element with the required attribute

: Read-write

Obtain the read/write input element.

: Read-only

Obtain readable input Elements

: Out-of-range

　　

 

 

Element state pseudo-class

: Checked
When the checkbox is selected

: Disabled
When an element is disabled

: Enabled
When the element is not disabled

 

Pseudo element

: First-line
Select the first line of text

: First-letter
Select the first word

: After
Add a pseudo element to the end of the element

: Before
Add a pseudo element at the beginning of the element

: Selection
Apply to selected text

 

The rational use of these selectors can help you solve many problems. Currently, the content of this article is being updated for a long time.