Select elements by context
- Select elements to format by ancestor elements
- Enter ancestor, where ancestor is the selector for the ancestor element of the element that you want to format.
- Enter a space (essential).
- If necessary, repeat steps (1) and (2) for each successive ancestor element.
- Enter descendant, where the descendant is the selector for the element to be formatted.
- Select the element to format by parent element
- Enter parent, where the parent is the selector that contains the directly formatted element.
- Enter > (greater than sign).
- Repeat step (1) and step (2) for each parent element of the descendant, if necessary.
- Enter child, where child is the selector for the element to be formatted.
. Architect > p{ color:red;}
/* This selector selects only the P elements of the architect class element (not child elements, Koziko elements, etc.). P elements that are contained in any other element are not selected */
- Select elements to format by neighboring sibling elements (sibling)
...<body>
-
- Enter sibling, where sibling is the selector of the element that appears in the same element, directly in the target element's money.
- Enter + (plus).
- Repeat step (1) and step (2) for each subsequent sibling element, if necessary.
- INPUT element, here is the selector for the elements that require formatting.
. Architect p+p{ color:red; } /* Neighboring sibling binding only selects elements directly following the sibling P element *//* common sibling element binding: You can select the sibling elements that are not directly behind another sibling element. The only difference between it and the neighboring sibling is the use of the ~ (tilde) instead of the + (plus sign). For example, h1~h2{color:red;} The H2 elements behind any sibling H1 that belong to the same parent element will be shown in red (they can be directly adjacent or not directly adjacent) */
Select the first or last element
: First-child Select first child element
: Last-child Select the last child element
Select the first letter or the first line of an element
: First-letter Select the first letter of an element
: First-line Select the first line of the element
Several common pseudo-classes
: Link Style not activated
: visited a linked style that has been activated
: Focus gets the style of the mouse focus
: hover setting cursor to link is the appearance of the link
: The appearance of active active links
Select elements by attributes
A:[attribute] matches a label with the specified attribute attribute, regardless of the specific value
A: [attribute= "value"] matches the a label of the specified attribute value
A:[attribute~= "Value" property value is a space-delimited number of words, with an exact match to the specified value
A:[attribute|= "value" property values begin with value-
A:[attribute^= the value of the "value" property is preceded by value, and value is part of the complete word or word
A:[attribute$= "Value" property value ends with value, value is part of complete word or word
A:[attribute*= "Value" property value is a substring of the specified value