Invalid solution when defining multiple class attributes in HTML
|
In the process of writing HTML, we often define multiple values for class attributes, but we also often find that the values we define are invalid! ! ! In the past, when I encountered this situation, I would just rewrite it, or directly use the id to set the CSS attribute. Today, I think something is wrong. . . I have to discover the truth! ! ! Copy code The code is as follows:<div id="p" class="middle_div padding_10"> <span id="s" class="normal_span"></span> </div> I set different colors in the two classes, red in middle_div and green in padding_10. The result showed green, and my first feeling was: the direction was wrong! So I swapped the two positions, and it was still green! ! this. . . . Could it be? ? ? I opened the CSS file and saw that padding_10 was in front of middle_div. Then I swapped their positions. Refresh the browser, red! ! ! So, when defining multiple class values, be sure to put your favorite style at the end! However, if you add a div in front of padding_10 (assuming the parent element is a div), it becomes div.padding_10, then you will find that no matter where it is, our p div is always green. From this example, we can see that the priority of the CSS style is determined when the CSS file is loaded, rather than being determined by the position of the class attribute in the HTML later. |
<<: MySQL Series 10 MySQL Transaction Isolation to Implement Concurrency Control
>>: Vue Element-ui implements tree control node adding icon detailed explanation
Recommend
CentOS 8 officially released based on Red Hat Enterprise Linux 8
The CentOS Project, a 100% compatible rebuild of ...
Goodbye Docker: How to Transform to Containerd in 5 Minutes
Docker is a very popular container technology. Th...
A brief analysis of understanding Vue components from an object-oriented perspective
When the same function and HTML code are used mul...
Detailed explanation of Linux environment variable configuration strategy
When customizing the installation of software, yo...
Teach you how to deploy zabbix service on saltstack
Table of contents Saltstack deploys zabbix servic...
Detailed deployment of Alibaba Cloud Server (graphic tutorial)
I have recently learned web development front-end...
Detailed explanation of several ways to remove the gap between inline-block elements in CSS
Recently, when working on mobile pages, inline-bl...
Understand the principles of MySQL persistence and rollback in one article
Table of contents redo log Why do we need to upda...
Pure CSS code to achieve drag effect
Table of contents 1. Drag effect example 2. CSS I...
Bootstrap3.0 study notes table related
This article mainly explains tables, which are no...
Simple implementation of ignoring foreign key constraints when deleting MySQL tables
Deleting a table is not very common, especially f...
Summary of Common Commands for Getting Started with MySQL Database Basics
This article uses examples to describe the common...
Four data type judgment methods in JS
Table of contents 1. typeof 2. instanceof 3. Cons...
How to eliminate the extra blank space at the bottom of the created web page when browsing
When using Dreamweaver or FrontPage to create HTM...
How to check disk usage in Linux
1. Use the df command to view the overall disk us...