Contents of this chapter
1. Mission objectives
We learned about element selectors in the last lesson, and learned about his advantages and disadvantages. If we have a large number of the same element tags, we now want a certain element tag to have an effect. The element tags we are learning now are not enough. Let’s learn about our most commonly used class selectors in this summary.
2. class selector
The internal style, external style, and inline style we talked about in the previous section are the selection of a specific label, and adding a style to it is regarded as label selection. The selector we will talk about in this section is to
select a type of label and add it to them Specific styles, for example, we have 6 div tags, we only want to add specific styles to 3 of them, if we can only add inline styles one by one like the previous section, because they are all div tags, if we choose to give If the div tag is added, it is all styled, so this involves our more detailed selector
3. Code demo
We want to change the font color of the second p tag
<!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>
.test {
color: bisque;
}
</style>
</head>
<body>
<p>无边落木萧萧下</p>
<p class="test">不尽长江滚滚来</p>
<div>君不见黄河之水天上来</div>、
<br>
<span>奔流到海不复回</span>
</html>
The effect is as follows
4. Summary
We have learned the class selector in this section. Its advantage is that you can specify a certain tag at will to change the format you want. We need to be proficient in it and it is very common.