Universal selector: * Select to all elements
Select child element:> Select to direct descendant of element (first level child element)
Adjacent Sibling selector: + Select to the first element immediately following the target element
Normal sibling selector: ~ Selects all sibling elements that follow immediately after
Pseudo-Class selectors:
: Before: After add content (equivalent to inline element) before and after element content
CSS3 structure Selector
: Nth-child selects child elements at the specified index
Nth-child (n) the nth child element under the parent element
Nth-child (odd) odd child element (same as Nth-child (2n-1))
Nth-child (even) even sub-elements (same as nth-child (2n))
Nth-child (AN+B) formula
* (Nth-child starting from 1)
: Nth-last-child (n) The penultimate nth child element
: Nth-of-type (N) Sub-elements of the nth specified type under a parent element
: Nth-last-of-type A child of the penultimate nth specified type under the parent element
: First-child selects the first child element under a parent element
: Last-child Select the last child element under the parent element
: Only-child Select the only child element under the parent element
: Only-of-type Select a unique child element of the specified type under the parent element
: Root selects the root directory of the document and returns the HTML
Div:only-child Note spaces (select only child elements under DIV)
Pseudo class Selector
: Link to a page that has not been visited set style
: visited sets the style of a link to a page that has been visited
: Hover on mouse hover
: Active is triggered when clicked
: Enabled selects the Enable State element
:d isabled Select the Disable state element
: Checked Select selected INPUT element (radio button or check box)
:d Efault Select a default element
: Valid, invalid select valid or invalid INPUT element based on input validation
: In-range, Out-of-range Select elements that are restricted within or outside the specified range
: repuired, optional Select the INPUT element according to whether it is allowed: required attribute
Use the label to modify the style of the radio:
Property Selector
E[attr] Property name, no specific attribute value
E[attr= "value"] Specifies the property name and specifies its corresponding property value
E[attr ~= "value"] Specifies the name of the property, which is found with this property name, and is separated from the other property names by a space, as follows:
E[attr ^= "value"] Specifies the property name, and the property value begins with value
E[attr $= "value"] Specifies property name, property value ends with value
E[attr *= "value"] Specifies the name of the property, which contains the value
E[attr |= "value"] Specifies the property name, the property value starts with value-, or the value is values
CSS Selector review