Understanding of CSS selector weight (personal test)
|
Copy code The code is as follows:<style type="text/css"> div.ui_infor p {font-size: 16px;} .ui_infor p {font-size: 14px;} </style> Copy code The code is as follows:<div class="ui_infor"> <p>test of css</p> </div> In the above example, the final display effect is font-size: 16px, not the following font-size: 14px; This combination of selectors has a quick method to judge: 0,0,0,0 The first digit represents the style written on the label, such as Copy code The code is as follows:<p style="font-size: 14px;"></p> The second digit represents the id selector, such as #demo {} The third digit represents: class name (.demo {}) or pseudo class (:hover) or attribute selector [rel="xx"] The fourth digit represents: tag selector p {} Now let’s practice with the first example: Copy code The code is as follows:div.ui_infor p {font-size: 16px;} Its weights are: 0,0,1,2 Copy code The code is as follows:.ui_infor p {font-size: 14px;} Its weights are: 0,0,1,1 Result: 0,0,1,2 > 0,0,1,1, so font-size: 16px is displayed; Supplement: !important has the highest weight, so there is no need to judge, but it will cause a bug in IE-6 browser. example: Copy code The code is as follows:p {font-size: 18px !important;font-size: 12px;} In IE-6 browser, font-size: 12px is displayed. Some information on the Internet says that IE-6 does not support !important, which is actually wrong. Let’s look at an example: Copy code The code is as follows:p {font-size: 18px !important;} p {font-size: 12px;} In IE-6, font-size: 18px is displayed, which means that IE-6 supports !important, but the performance is a bit weird. The weird thing is that the !important attribute is overwritten by the latter style with the same name. For example, in the example p {font-size: 18px !important;font-size: 12px;}, font-size: 12px overrides font-size: 18px !important. Using this quirk, you can implement "min-height" in IE-6 without using CSS_hack Copy code The code is as follows:p { min-height: 50px; height:auto !important; height:50px;} |
<<: Introduction to the process of extending the boot partition in Kylin 4.0.2 (Ubuntu)
>>: MySQL tutorial thoroughly understands stored procedures
Recommend
How to solve jQuery conflict problem
In front-end development, $ is a function in jQue...
Reflection and Proxy in Front-end JavaScript
Table of contents 1. What is reflection? 2. Refle...
MySQL Basic Tutorial Part 1 MySQL5.7.18 Installation and Connection Tutorial
Starting from this article, a new series of artic...
Secondary encapsulation of element el-table table (with table height adaptation)
Preface During my internship at the company, I us...
Analysis of the Principle of MySQL Index Length Limit
This article mainly introduces the analysis of th...
MySQL slow query method and example
1. Introduction By enabling the slow query log, M...
Detailed explanation of HTML form elements (Part 1)
HTML forms are used to collect different types of...
MySQL 8.0.18 stable version released! Hash Join is here as expected
MySQL 8.0.18 stable version (GA) was officially r...
How to implement Linux deepin to delete redundant kernels
The previous article wrote about how to manually ...
MySQL 8.0.15 version installation tutorial connect to Navicat.list
The pitfalls 1. Many tutorials on the Internet wr...
Block-level and line-level elements, special characters, and nesting rules in HTML
If we introduce the nesting rules of basic HTML w...
React State state and life cycle implementation method
1. Methods for implementing components:組件名稱首字母必須大...
Mysql practical exercises simple library management system
Table of contents 1. Sorting function 2. Prepare ...
How to insert video into HTML and make it compatible with all browsers
There are two most commonly used methods to insert...
Summary of Kubernetes's application areas
Kubernetes is the leader in the container orchest...