1. Tag selector
1. The selectors such as <div><em> defined earlier in main.css are called tag selectors. Such selectors have a large scope of influence and cannot be precisely controlled
The special one is the asterisk selector, which matches all tags. There are performance problems, so use with caution
*{
margin:0;
padding:0；
}
2. id selector
Each tag element has a unique ID name, which only acts on one tag at a time, which is not commonly used
write in main.css
div{
color:red;
}
#div2{
color:blue;
}
The <div> tag on the original page is as follows
<body>
<div>This is the first div</div>
<div id="div2">This is the second div</div>
</body>
Effect: the first div is red, the second div is blue, the effect of cascading style sheets
3. Class selector
It can be used in multiple label elements, and multiple classes can also be used on one label element, which is commonly used.
Example 1: One class for multiple label elements
The content in main.css is
.red{
color:red;
}
#box{
color:green;
}
The code in the page is
<body>
<div class="red">This first div</div>
<div class="red">This is the second div</div>
<div id="box" class="red">This is the third div</div>
</body>
The actual effect is that the first and second divs are red, but the third div is green, because the weight of the id selector is larger than that of the class selector
Example 2: Using multiple classes on a label element
The style content of main.css is as follows
.red{
color:red;
}
.bold{
font-weight:bold;
}
.yahei{
font-family:'Microsoft Yahei';
}
in the web
<body>
<div class="red bold yahei">This is the first div</div>
</body>
4. Level selector
Example 1
.duanluo{
text-indent:40px;
font-size:20px;
}
<p class="duanluo">
Hello, my name is Sister Han, and my major is software engineering.
</p>
<p>
Hello, my name is Li Lei, my major is art.
</ p>
If you only want the content of the <em> tag in the first paragraph not to be slanted and to change the color, you need to use the level selector
.duanluo in {
font-style:normal;
color:pink;
}
Example 2, use in a list, multiple level selectors
.list{
list-style:none; #Remove the default dot in front of the list
}
.list li{
height:30px;
}
.list a{
text-decoration:none;
font-family:'Microsoft Yahei';
font-size:20px;
}
write in html page
<ul class="list">
<li><a href="">新闻1</a></li>
<li><a href="">新闻2</a></li>
<li><a href="">新闻3</a></li>
</ul>
Five. Group selector, the role is to simplify the style of writing
Example 1, as follows
.box1{
font-size:14px;
text-indent:28px;
color:red;
}
.box2{
font-size:14px;
text-indent:28px;
color:blue;
}
.box3{
font-size:14px;
text-indent:28px;
color:yellow;
}
<body>
<div class="box1">文字001</div>
<div class="box2">文字002</div>
<div class="box3">文字003</div>
</body>
The above three class selectors are the same except for different colors, which can be abbreviated by group selectors. The same styles are written together, the class names are separated by commas, and different styles are written separately.
.box1,.box2,.box3{
font-size:14px;
text-indent:28px;
}
.box1{
color:red;
}
.box2{
color:blue;
}
.box3{
color:yellow;
}
6. Pseudo-class and pseudo-element selectors
Commonly used pseudo-class selectors are hover, which can be used on all labels to indicate the state when the mouse hovers over an element. Pseudo-element selectors include before and after, which can insert content into elements through styles
Example 1, when the mouse is over the text of the link tag <a>, the text changes color
.list a{
text-decoration:none;
color:gray;
}
.list a:hover{
color:blue;
}
Example 2, make the text in all paragraph tags <p> change color when the mouse is over
p:hover{
color:red
}
Example 3, before or after the specified text, automatically add the text you want to add
.box1{
color:red;
}
box2{
color:green;
}
.box1:before{
content: "Text in front";
color:blue;
}
.box2:after{
content: "Text after";
color:blue;
}
<body>
<div class="box1">文字001</div>
<div class="box2">文字002</div>
</body>
The effect is that the page displays:
Text 001 in front of the text
text 002 text after