-------------------------------HTML
<div class="big">
<div class="inside">Inside</div>
<div>without class</div>
<p>My name is...</p>
</div>
-------------------------------CSS
.big .inside {
color: red;
}
.big {
color: green;
}
Hello. If you look at the above coding, the color of the class inside is red If you change the color of the parent division, the rest will change The class designated div has the same color. Why doesn't it change?
I'm still a beginner.Is it a ranking question? Oh, I can only see the code results in the preview.Oh... What should I do?
css html5
First of all, if you correct a little mistake, it's as follows. If you use multiple classes together, you need to insert , :-)
.big, .inside {
color: red;
}
.big {
color: green;
}
It's true that if the CSS is at the same level, the code that was declared last, so the code located in the lower line, has a higher priority. However, if you applied the class to a lower level tag rather than to the same level, the class applied to the lower level is reflected. After all, I think it would be good to understand that it is about the priority of applying CSS.
Therefore, <div class="inside"> below the highest <div class="big"> of the above code has a higher priority for CSS application. If you want to force color:red; in the above code, you can enter color:red!important;. Like this.
.big, .inside {
color: red !important;
}
.big {
color: green;
}
In fact, CSS application rankings are more accurate and systematic. Therefore, if you don't understand this part well, it may feel difficult. For more information on CSS, see From Opportunities.
© 2024 OneMinuteCode. All rights reserved.