ID selector:
IDs are generally unique. Let's take a look at the operation:
<Body>
<Span id = "special" class = "menu"> Topic 1 </span>
<Span class = "menu"> Column 2 </span>
<Span class = "menu"> column 3 </span>
</Body>
Then in the style file, we will:
# Special
{
Font-weight: bold;/* bold */
}
We achieved a mixture of two effects. See the results:
However, when the id selector conflicts with the style of the class selector, this involves a priority issue. Here I will talk about the priority directly, ID selector> class selector.
HTML Tag selector:
The setting is a larger scope. As long as it is inside the label, the style will be applied. In this Code, there is a body, we write a color value in the body of the style:
Body
{
Color: # f0f;
}
In the body of our HTMLPage:
<Body>
<Span id = "special" class = "menu"> Topic 1 </span>
<Span class = "menu"> Column 2 </span>
<Span class = "menu"> column 3 </span>
123456
</Body>
Then this 123456 will change color. Effect:
We can easily see that there is no color in the first column, second column, and third column. Why? Obviously, this involves a priority issue. ID priority> class selector> HTML Tag selector.
Another content is a parent-child relationship, which we write in HTMLPage as follows:
<Body>
<Span id = "special" class = "menu"> Topic 1 </span>
<Span class = "menu"> Column 2 </span>
<Span class = "menu"> column 3 </span>
123456
</Body>
In the style file:
. Title span
{
Color: #000;
Font-size: 12px;/* font size */
}
Remember the space between title and span, and the effect is:
We can see that this "1" is obviously changed.
There is also a parallel writing: we write in the style as follows:
[Html] view plaincopy
1. menu,. title
2 .{
3. background-color: # ee00ff;
4 .}
The menu and title are separated by commas to achieve the goal. Let's look at the effect:
Next we will talk about the last content, that is, the class can be set to multiple, so let's take a look at the situation, we write in HTMLPage:
<Body>
<Span id = "special" class = "menu"> Topic 1 </span>
<Span class = "menu niu"> Column 2 </span>
<Span class = "menu"> column 3 </span>
<Span class = "title"> This Is A <span> 1 </span> News title </span>
123456
</Body>
Then we write this in the style:
. Niu
{
Text-decoration: underline;
Color: # eeeedd;
}
. Menu {/* topic style */
Color: # f00;/* text color */
}
We can see column 2
It is already the same as niu, And it is underlined, which leads to a problem. Should the color be menu or niu? We can see that it is menu, which is related to the order of CSS style arrangement. Corresponds to the following.
Author: jlins_you
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
