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