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:

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

A brief discussion on the manifestation and value selection method of innodb_autoinc_lock_mode

Invalid solution when defining multiple class attributes in HTML

A brief discussion on the manifestation and value selection method of innodb_autoinc_lock_mode

Detailed explanation of the difference between routing hooks in Vue2.x and Vue3.x

A brief discussion on creating cluster in nodejs

How to use the Linux more command in Linux common commands

Details of using Vue slot

DIV common tasks (Part 1) — General tasks (show scrollbars/hide divs/disable event bubbling, etc.)

WeChat applet implements user login module server construction

How to expand the disk size of a virtual machine

Example method of viewing IP in Linux

Solution to Ubuntu 20.04 Firefox cannot play videos (missing flash plug-in)

Recommend

How to execute Linux shell commands in Docker

Example of how to configure multiple virtual hosts in nginx

Alibaba Cloud OSS access rights configuration (RAM permission control) implementation

How to use Linux locate command

Detailed explanation of the difference between adaptive and responsive analysis in vernacular

Vue implements the sample code of adding, deleting, modifying and checking the tree structure

Tutorial on how to install and configure the unzipped version of MySql under Windows 10

How to view the network routing table in Ubuntu

Installation steps of docker-ce on Raspberry Pi 4b ubuntu19 server

Should I use distinct or group by to remove duplicates in MySQL?

Comprehensive understanding of HTML Form elements

How to represent various MOUSE shapes

element-ui Mark the coordinate points after uploading the picture

How to customize an EventEmitter in node.js

innerHTML Application