Element selector

First we need to know the relationships between elements:

  • Parent element: An element that directly contains child elements
  • Child element: An element directly contained by a parent element
  • Ancestor element: An element that directly or indirectly contains a descendant element
  • Descendant element: An element contained directly or indirectly by an ancestor element
  • Sibling elements: elements that have the same parent element

Descendant element selector

  • Action: Selects the specified descendant element of the specified element.
  • Syntax: Ancestor element descendant element {} (separated by space)

div span {
    color: red;
}
Copy the code
<div> <span> The first span. </span> <! -- Color is red--> <span> Second span. </span> <! </div>Copy the code

Child element selector

  • Action: Selects the specified child element that specifies the parent element
  • Syntax: parent element > child element

div > span {
    color: red;
}
Copy the code
<div> <span> The first span. </span> <! -- Color is red --> <span> Second span. </span> <! -- Red --> <ul> <span> <span> </span><! </ul> </div>Copy the code

pseudo-classes

Represents a particular state of an element.

  • :active Adds styles to active elements.
  • :focus Adds styles to elements that have keyboard input focus.
  • :hover Adds styles to elements when the mouse hovers over them.
  • :link Adds styles to links that are not accessed.
  • :visited Adds styles to links that have already been visited. (Privacy issues can only be set to color)
  • :first-child Adds the style to the first child of the element.
  • :lang Adds style to the element with the specified lang attribute.
  • :: Selection Matches portions that are selected or highlighted by the user.
A :link {/* unvisited link */ color:#FF0000
}		
Copy the code

Pseudo elements

Represents some special position in the element.

  • :first-letter Adds a special style to the first letter of text.
  • :first-line Adds special styles to the first line of text.
  • :before Adds content before the element.
  • :after Adds content after the element.
h1:after {
  content:url(logo.gif);
}
Copy the code

Property selector

  • Function: You can select a specified element based on its attributes or attribute values.
  • Grammar:
    • [Attribute Name] Selects the element that contains the specified attribute
    • [Attribute name =” attribute value “] Selects the element with the specified attribute value
    • [Attribute name ^=” attribute value “] selects the element whose attribute value begins with the specified content
    • [Attribute name $=” attribute value “] selects the element whose attribute value ends in the specified content
    • [Attribute name *=” attribute value “] Selects the element whose attribute value contains the specified content

p[title] {
	background-color: yellow;
}
p[title="hello"] {
	background-color: yellow;
}
<p title="hello"Text > < / p >Copy the code

Other child element selectors

  • :first-child Specifies the first element in the parent element and the style of the specified element.
P :first-child {// Match the p element as the first child of any element color: red; }Copy the code

<div> <div> paragraph </div> <! <p> <p> Paragraph </p> <p> </div>Copy the code

<div> <p> paragraph </p> <! <p> </p> </div>Copy the code

Tip: The most common mistake is to assume that a selector like P :first-child selects the first child of the p element.

  • :last-child Specifies the last element in the parent element and the style of the specified element.
P :last-child {// Match the p element as the first child of any element color: red; }Copy the code

<div> <p> paragraph </p> <p> paragraph </p> <div> Paragraph </div> <! </div> </div>Copy the code

<div> <p> paragraph </p> <p> paragraph </p> <! </div> </div>Copy the code

Tip: The most common mistake is to think that a selector like P: last-Child selects the last element of the p element.

  • :nth-child matches the NTH position and is the element of the specified element. Even is the even position, odd is the odd position.
P :nth-child(2) // Match the second child of its parent with the color of p {color:red; }Copy the code

<div> <div> paragraph </div> <p> paragraph. </p> <p> paragraph. </p> </div>Copy the code
  • :first-of-type Selects the first element of a specific type.

p:last-of-type
{
background:red;
}
Copy the code
<div> the first paragraph. </div> <p> Second paragraph. </p> <! -- Color red--> <p> Third paragraph. </p> <p> Fourth paragraph. </p>Copy the code
  • :last-of-type Selects the last element of a specific type.
p:last-of-type
{
background:red;
}
Copy the code

<p> First paragraph. </p> <p> Second paragraph. </p> <p> Third paragraph. </p> <! -- Color red--> <div> fourth paragraph. </div>Copy the code
  • :nth-of-type Selects the NTH element of a specific type.

P :nth-child(3) // Match the second child of its parent with p's background color {background:red; }Copy the code
<p> First paragraph. </p> <p> Second paragraph. </p> <p> Third paragraph. </p> <! -- Color red--> <div> fourth paragraph. </div>Copy the code

Sibling element selector

  • What it does: Selects an element that is immediately adjacent to the specified sibling (no elements are separated)
  • Syntax: elements 1 to 2 (the element immediately preceding the selected element 1 is an element of element 2); Element 1 + element 2 (the element next to selected element 1 is the element of element 2)

No pseudo class

  • What it does: Removes selected elements from a selected element
  • Syntax: :not(selector)

p:not(.hello) {
	background: yellow
}
Copy the code
<p> First paragraph. </p> <! -- Background yellow --> <p class="hello"Word-wrap: break-word! Important; "> <! -- No background --> <p> Third paragraph. </p> <! -- Background yellow --> <p> Fourth paragraph. </p> <! Background yellow -->Copy the code