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
Network configuration of Host Only+NAT mode under VirtualBox
The network configuration of Host Only+NAT mode u...
Django2.* + Mysql5.7 development environment integration tutorial diagram
environment: MAC_OS 10.12 Python 3.6 mysql 5.7.25...
How to connect Django 2.2 to MySQL database
1. The error information reported when running th...
Implementation of effective user groups and initial user groups in Linux
First check the /etc/group file: [root@localhost ...
Summary of 76 Experience Points of User Experience
Classification of website experience 1. Sensory e...
Example tutorial on using the sum function in MySQL
Introduction Today I will share the use of the su...
Free tool to verify that HTML, CSS and RSS feeds are correct
One trick for dealing with this type of error is t...
Analysis of the reasons why MySQL field definitions should not use null
Why is NULL so often used? (1) Java's null Nu...
Summary of Linux date command knowledge points
Usage: date [options]... [+format] or: date [-u|-...
What codes should I master when learning web page design?
This article introduces in detail some of the tech...
CSS to achieve the sticky effect of two balls intersecting sample code
This is an effect created purely using CSS. To pu...
Ansible automated operation and maintenance deployment method for Linux system
Ansible is a new automated operation and maintena...
Detailed explanation of pure SQL statement method based on JPQL
JPQL stands for Java Persistence Query Language. ...
In-depth explanation of MySql table, database, sharding and partitioning knowledge
1. Introduction When the amount of data in the da...
Summary of Mysql common benchmark commands
mysqlslap Common parameter description –auto-gene...