Selector defined in CSS1
Type Selectors
Used to select an element of a specified type (in fact, it is the html tag selector), the common usage is as follows:
body { /*Define styles for body elements*/ } body,div { /*Choose multiple label elements at the same time*/ }
ID selector
The html elements used to select the specified ID are as follows:
<div id="nav"> </div> <style> #nav { /*Styles for elements with ID nav*/ } </style>
Because CSS is rendered in right-to-left order and ID is unique, you can omit the previous type selector.
Class selector
The html elements used to select the specified class name are as follows:
<div class="nav"> </div> <style> .nav { /*Styles for elements that define class as nav*/ } </style>
Descendant Selectors
For selecting nested elements of hierarchy, the common usage methods are as follows:
<div class="nav"> <div class="nav-tools"> </div> </div> <div class="nav"> <div> <div class="nav-tools"> </div> </div> </div> <style> .nav .nav-tools { /*The parent element class that defines the element contains nav, and the child element class contains elements of nav-tools.*/ } </style>
It should be noted that the inclusion selector does not care about the hierarchy, as long as the latter selector is included in the previous element. For example, both nav-tools will be selected by the selector!
Pseudo-class selector
link - link Pseudo Class Selector
For defining the style when the link is not accessed, the common usage is as follows:
<div class="nav"> <div class="nav-tools"> <ul> <li><a href="#"></a></li> </ul> </div> </div> <style> a:link { text-decoration: none; color: blue; } </style>
Vised -- Link Pseudo Class Selector
Used to define the link style that has been accessed, the common usage is as follows:
<style> a:visited { text-decoration: none; color: red; } </style>
active - User Operates Pseudo Class Selector
For defining the style of the activated element, the common usage is as follows:
<style> a:active { text-decoration: none; color: green; } </style>
hover - User Operates Pseudo Class Selector
To define the style of the mouse passing through the element, the common usage methods are as follows:
<style> a:hover { text-decoration: none; background-color: #F4F4F4; } </style>
focus -- User operates pseudo-Class selector
For defining the style of the element that gets the focus, the common usage is as follows:
<style> input:focus { text-decoration: none; background-color: #F4F4F4; } </style>
::first-line
For defining the style of the first line of text within an element, the common usage is as follows:
<div class="doc"> <p>Cascading Style Sheet(English full name: Cascading Style Sheets)It's a form of expression. HTML(An application of standard generic markup language) XML(A subset of the standard generic markup language (GML) and other file-style computer languages. CSS It can not only modify the web pages statically, but also format the elements of the web pages dynamically with various scripting languages.</p> </div> <style> .doc { width: 360px; } .doc>p::first-line { color: red; } </style>
::=first-letter
For defining the style of the first character in an element, the common usage is as follows:
<style> .doc { width: 360px; } .doc>p::first-letter { font-size: 2em; color: red; } </style>
Selector defined in CSS2
*—— wildcard selector
Common styles for defining all elements in DOM are as follows:
<div class="nav"> <div> <div class="nav-tools"> </div> </div> </div> <style> .nav * { margin: 0; } </style>
If you want to reset the default style, wildcard selectors are not recommended.
[attribute] - Attribute selector
The styles used to define elements that contain attribute s are as follows:
<div class="nav"> <div> <div class="nav-tools"> <ul> <li active>Menu</li> <li>Index</li> </ul> </div> </div> </div> <style> li[active] { color: red; } </style>
[attribute= "value"] - Property selector
The values used to define element attributes are specified value styles. Common usage methods are as follows:
<div class="nav"> <div> <div class="nav-tools"> <ul> <li active="active">Menu</li> <li active>Index</li> </ul> </div> </div> </div> <style> li[active="active"] { color: red; } </style>
[attribute~="value"] - attribute selector
For defining attributes that contain specified values and separating attributes by spaces, the common usage is as follows:
<div class="nav"> <div> <div class="nav-tools"> <ul> <li active="test active">Menu</li> <li active="active-test">Index</li> </ul> </div> </div> </div> <style> li[active~="active"] { color: red; } </style>
As shown above, only the foreground of the first li will be defined as red!
[attribute|="value"] - Property selector
Used to define attribute values that contain specified values and are linked by hyphens (-). Common usage is as follows:
<div class="nav"> <div> <div class="nav-tools"> <ul> <li active="test active">Menu</li> <li active="active-test">Index</li> </ul> </div> </div> </div> <style> li[active|="active"] { color: red; } </style>
As shown above: Only the prospect of the second li will be defined as red!
first-child: Structural Pseudo-Class Selector
The styles used to define the first element of an element are as follows:
<div class="nav"> <div> <div class="nav-tools"> <ul> <li active="test active">Menu</li> <li active="active-test">Index</li> </ul> </div> </div> </div> <style> li:first-child { color: red; } </style>
Note: First-child is the first element that acts on the same level and same label. As shown above, if you want to define the style of the first li, you need to use li:first-child for a long time instead of ul:first-child!
:lang(en)
For defining element styles with lang= "en" attributes, the common usage is as follows:
<div> <p lang="en">Hello World</p> </div> <style> p:lang(en) { color: red; } </style>
::before
Used to define the content and style before the element, the common usage is as follows:
<div> <a>World</a> </div> <style> a::before { content: "Hello "; } </style>
::after
Used to define the content and style after the element, the common usage is as follows:
<div> <a>Hello</a> </div> <style> a::after { content: "World"; } </style>
div > p
The common methods used to define the style of the first-level child elements of an element are as follows:
<div class="nav"> <div> <div class="nav-tools"> <ul> <li active="test active">Menu</li> <li active="active-test">Index</li> </ul> </div> </div> </div> <style> .nav-tools > ul { background-color: red; } .nav-tools > li { /*This won't work because li is not a direct child of ul.*/ } </style>
h1 + p
For defining element styles adjacent to elements, common usage methods are as follows:
<div> <h1>CSS</h1> <p>Cascading Style Sheet(English full name: Cascading Style Sheets)It's a form of expression. HTML(An application of standard generic markup language) XML(A subset of the standard generic markup language (GML) and other file-style computer languages.</p> </div> <style> h1 + p { color: red; } </style>
CSS3 Added Attribute Selector
[foo^="bar"]
Styles used to define elements whose attributes begin with bar
[foo$="bar"]
Styles used to define elements whose attributes end in bar
[foo*="bar"]
To define the style of elements containing bar in element attributes, it should be noted that this is included, that is to say, no matter what combination, as long as the attribute value and the three consecutive letters of bar are selected!
Although CSS3 still retains the attribute selector defined in CSS2, it is recommended to use the attribute selector of CSS3 instead!
Structural pseudo-Class selector
:root
Styles used to define html tag elements
:nth-child(n)
Used to define the style of child elements, n represents the number of child elements. N can be a number, or a keyword odd, even t, or formula. Common usage methods are as follows:
<table> <tbody> <tr> <td>name</td> <td>gender</td> <td>age</td> </tr> <tr> <td>George</td> <td>Male</td> <td>23</td> </tr> <tr> <td>Kevin</td> <td>Male</td> <td>28</td> </tr> <tr> <td>Angule</td> <td>Male</td> <td>23</td> </tr> </tbody> </table> <style> tr:nth-child(even) { background-color: red; } </style>
:nth-last-child(n)
It's the same as nth-child(n), except that the sorting is from the back to the front!
:nth-of-type(n)
The styles used to define the nth element of the same element are as follows:
<table> <tbody> <tr> <td>name</td> <td>gender</td> <td>age</td> </tr> <tr> <td>George</td> <td>Male</td> <td>23</td> </tr> <tr> <td>Kevin</td> <td>Male</td> <td>28</td> </tr> <tr> <td>Angule</td> <td>Male</td> <td>23</td> </tr> </tbody> </table> <style> tr:nth-of-type(even) { background-color: red; } </style>
:nth-last-of-type(n)
It's the same as nth-of-type(n), except that the sorting is from the back to the front!
:last-child
For defining the style of the last element, the common usage is as follows:
<table> <tbody> <tr> <td>name</td> <td>gender</td> <td>age</td> </tr> <tr> <td>George</td> <td>Male</td> <td>23</td> </tr> <tr> <td>Kevin</td> <td>Male</td> <td>28</td> </tr> <tr> <td>Angule</td> <td>Male</td> <td>23</td> </tr> </tbody> </table> <style> tr:last-child { background-color: red; } </style>
:first-of-type
Define the style of the first element of the same type as nth-of-type(1)
:last-of-type
Define the style of the last element of the same type. Common usage is as follows:
<table> <tbody> <tr> <td>name</td> <td>gender</td> <td>age</td> </tr> <tr> <td>George</td> <td>Male</td> <td>23</td> </tr> <tr> <td>Kevin</td> <td>Male</td> <td>28</td> </tr> <tr> <td>Angule</td> <td>Male</td> <td>23</td> </tr> </tbody> </table> <style> tr:last-of-type { background-color: red; } </style>
:only-child
There is only one sub-element to define and it is the same as making element labels. Common usage methods are as follows:
<div> <h1>Hello</h1> </div> <style> h1:only-child { /*If there are any other elements in the div, h1 will not render in the style defined in the selector*/ } </style>
:only-of-type
To define a style that contains only one specified tag element, the common usage is as follows:
<div>
<h1>Hello</h1>
</div>
<style>
h1:only-of-type { /*If there are any other elements in the div, h1 will not render in the style defined in the selector*/ }
</style>
:empty
For definition, an element does not contain any style of child elements. Common usage is as follows:
<div> </div> <style> div:empty { display: none; } </style>