CSS selectors

This is the 18th day of my participation in the August Genwen Challenge.More challenges in August

What is CSS? CSS (Cascading style Sheets) is used to style documents and is the language for describing the style of HTML or XML documents. CSS selectors specify which elements certain CSS rules apply to.

Basic selector

• Universal selector: *Select all the elements. Optionally, you can restrict it to a specific namespace or to all namespacesns|* * | *.
• Element selector: elementnameSelect the element named elementName.
• Class selectors:.classnameChoose anyclassThe element containing className in the property.
• The ID selector:#idnamechooseidElement with attribute idName. Within a document, each ID attribute should be unique.
• Property selector: Selects any element whose attributes match the criteria.
  • [attr]Select all elements with the attr attribute;
  • [attr=value]Select all elements with an attr attribute and attr= “value”
  • [attr~=value]Select all elements that have an attr attribute and whose attribute value contains value;
  • [attr|=value]Select all elements with an attr attribute whose value starts with “value”;
  • [attr^=value]Selects each element with an attr attribute whose value begins with value; (The match is a regular match, so the value in the selector should be string)
  • [attr$=value]Selects each element with an attr attribute whose value ends in value; (The match is a regular match, so the value in the selector should be string)
  • [attr*=value]Select each element that has an attr attribute and whose attribute value contains a value substring; (The match is a regular match, so the value in the selector should be string)

If multiple generic selectors are placed next to each other, elements that satisfy all of the selectors’ requirements are selected.

Packet selector

• Selector list: Selects all nodes that can be selected by any of the selectors in the list. For elements between lists.No separate.

Example: div, span matches both the element and the

combiner

• Descendant combinator: The (space) combinator selects the descendant node of the previous element.
  • For example,div spanMatches all located at any<div>intra-element<span>Elements.
• Direct descendant combinator:>The combinator selects the node of the immediate child of the previous element.
  • Such as:ul > liMatches are nested directly in<ul>All of the elements<li>Elements.
• General sibling combinator:~The combinator selects sibling elements, that is, the latter node is anywhere after the previous node and shares the same parent node.
  • Such as:p ~ spanMatching the same parent element,<p>Everything after the element<span>Elements.
• Adjacent to the sibling combinator:+The combinator selects adjacent elements, that is, the latter element follows the previous one and shares the same parent node.

Pseudo selector

• Pseudo-classes: : Pseudo-selectors support selecting elements based on state information that is not included in the document tree. It’s actually selecting elements. Like normal classes, you can write multiple pseudo-classes together in a selector.

  • :active: matches elements activated by the user. This style may be overridden by other linked-related pseudo-classes that are declared later, so for the style to work, you need to change the:activeIs placed after all linked styles. This chaining pseudo-class sequence is calledLVHA order::link— – >:visited— – >:hover— – >:active.In a system with multi-button mouse ICONS, CSS 3 provides:activeThe pseudo class must only match the primary key; For a right-handed mouse, it’s the left button.
  • :checked: Any selected stateradio(<input type="radio">), checkbox (<input type="checkbox">) or (“select”) elementsoptionHTML element (“option”).
  • :default: the default form element in a set of related elements.
  • :disabled: Any element that is disabled. An element is disabled if it cannot be activated (such as selecting, clicking, or accepting text input) or get focus.
  • :empty: An element with no child elements. Child elements can only be element nodes or text (including Spaces). Comments or processing instructions do not matter.
  • :enabled: indicates any enabled element. An element is enabled if it can be activated (such as selecting, clicking, or accepting text input) or if it can get focus.
  • :first-child: represents the first element in a set of sibling elements.
  • :first: The style of the first page when printing the document.
  • :first-of-type: represents the first element of its type in a set of sibling elements.
  • :focus: represents the element (such as form input) that gets focus. It is triggered when the user clicks or touches the element or selects it using the keyboard’s TAB key.
  • :focus-within: indicates that an element gets focus, or that its descendants get focus.
  • :host: Selects the root element of the Shadow DOM that contains the CSS used internally
  • :host(): Select the Shadow host that contains the Shadow DOM that uses this CSS (so you can select the custom element that includes it from the Shadow DOM) — but only if the function’s arguments match the selected Shadow host.
  • :hover: uses the indicating device to virtualize the condition of an element (it is not activated).
  • :indetermainate: represents a form element whose state is uncertain
  • :in-range: stands for one<input>Element whose current value is in an attributemin 和maxWithin a limited range.
  • :invaild: indicates that any content is not authenticated<input>Or other<form>The element
  • :lang(): Matches page elements based on element language.:lang(en) :lang(fr)
  • :last-child: represents the last child of the parent element.
  • :last-of-type: represents the last element of a given type in the list of child elements.
  • :left: Set the CSS style on the left side of the printed document. The “left to right” writing direction should be used on the first page:rightConfiguration; “From right to left” should be used on the first page:leftConfiguration.
  • :link: Selects the link in the element.
  • :not(): The element used to match the mismatch group selector. Because of its role in preventing specific elements from being selected, it is also calledThe pseudo class(negation pseudo-class).
  • :nth-child: find all siblings of the current element, then sort by position starting from 1. CSS pseudo-class: set of elements matched by the expression (an+b) in parentheses nth-child (n= 0,1,2,3…) .tr:nth-child(2n+1)Represents odd rows in an HTML table
  • :nth-last-child: Matches elements at certain positions from back to front in sibling nodes
  • :nth-last-of-type
  • :only-child: Matches elements that do not have any sibling elements. The equivalent selector can also be written as:first-child:last-childor:nth-child(1):nth-last-child(1)
  • :only-of-type
  • :optional: indicates nonerequiredProperties of the<input>.<select>or<textarea>The element uses it.
  • :out-of-range
  • :read-only: represents the state in which an element cannot be edited by the user (such as a locked text input field).
  • :read-write: represents an element (such as an input element for inputting text) that can be edited by the user.
  • :required
  • :right
  • :root: matches the root element of the document tree. For HTML,:rootsaid<html>Elements,
  • :scope: represents the element that acts as a reference point for the selector to match. When used in a stylesheet,:scopeEquivalent to:root.
  • :target: represents a unique page element (target element), of whichidMatches the current URL fragment.
  • :vaild
  • :visited

• Pseudo-elements :: : Pseudo-selectors are used to represent entities that cannot be expressed in HTML semantics. Inserts an entity somewhere in the selected element. Only one pseudo-element can be used in a selector. The pseudo-element must follow the simple/base selector in the statement.

  • ::before:
  • ::after: creates a pseudo-element as the last child of the selected element. Usually cooperatecontentProperty to add decorative content to the element. This virtual element defaults to an inline element.
  • ::cue: matches the selected elementWebVTTPrompt.
  • ::first-letterSelect the first letter of the first line of a block-level element on a line where the text is preceded by no other content (such as images and inline tables).
  • ::first-line: Selects the first row of a block-level element. The length of the first line depends on many factors, including the element width, the document width, and the text size of the text. As with all other pseudo-elements, ::first-line does not match any real HTML element.
  • ::selection: CSS pseudo-elements apply to parts of the document that are highlighted by the user (such as those selected using a mouse or other selection device).
  • ::slotted(): Used to select the elements to be placed in the HTML template