Home > Article > Web Front-end > What are the categories of css selectors?
What are the categories of css selectors?
- 醉折花枝作酒筹Original
- 2021-05-20 17:39:1715220browse
The classification of css selectors are: 1. Tag selector; 2. Class selector; 3. ID selector; 4. Global selector; 5. Combination selector; 6. Inherited selector; 7 , pseudo-class selector; 8. Attribute selector for string matching.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
There are many types of css selectors. Let’s take a look at the types of css selectors
1. Tag selectors (such as: body, p, p, ul, li).
2. Class selector (such as: class="head", class="head_logo").
3. ID selector (such as: id="name", id="name_txt").
4. Global selector (such as: *).
5. Combine selectors (such as: .head .head_logo, please note that the two selectors are separated by the space bar).
6. Inherit the selector (such as: p p, note that the two selectors are separated by the space bar).
7. Pseudo-class selector (for example: link style, pseudo-class of a element, 4 different states: link, visited, active, hover.).
8. Attribute selectors for string matching (^ $ * three types, corresponding to start, end, and inclusion respectively).
The most commonly used CSS selectors among the above eight CSS selectors are label selectors, .class selectors, ID selectors, attribute selectors, and pseudo-class selectors.
Below we will give an example of each of these five css selectors: (For other selector examples, please refer to the css manual)
(1) Label selector:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<p>余生有你</p>
<p>幸得安喜</p>
</body>
</html>The effect is as follows:
(2). Class selector:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.class1{
background-color: blue;
}
.class2{
background-color: brown;
}
</style>
</head>
<body>
<div class="class1">div</div>
<div class="class2">div</div>
<div class="class3">div</div>
</body>
</html>The effect is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#class1{
background-color: blue;
}
#class2{
background-color: brown;
}
</style>
</head>
<body>
<div id="class1">div</div>
<div id="class2">div</div>
<div id="class3">div</div>
</body>
</html>The effect is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div[id=class2]{
background-color: brown;
}
</style>
</head>
<body>
<div id="class1">div</div>
<div id="class2">div</div>
<div id="class3">div</div>
</body>
</html>The effect As follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a:link{
color: brown;
background: cornsilk;
}
a:hover{
text-decoration: none;
color: rgb(252, 0, 0);
}
a:active{
background: rgb(202, 0, 175);
color: rgb(59, 59, 59);
}
a:visited{
color: brown;
background: cornsilk;
}
</style>
</head>
<body>
<a href="#">哈喽，看我，你在干什么</a>
</body>
</html> Effect:
The above is the detailed content of What are the categories of css selectors?. For more information, please follow other related articles on the PHP Chinese website!