Understand CSS selector priority and !important weight-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

Understand CSS selector priority and !important weight

青灯夜游

Dec 31, 2020 pm 05:23 PM

cssWeights

Understand CSS selector priority and !important weight

Recommended: css video tutorial

Selector priority and !important weight in CSS

.classThe selector is higher than the label selector. The
#id selector is higher than the .class selector.
The tag selector is the selector with the lowest priority. The
!important attribute has the highest weight value priority, greater than all selectors.

Tag selector and .class selector

Let us enter the practice of which one has higher priority between the tag selector and the .class selector. The practical content is as follows : Set the text color of the h2 tag in the HTML page.

Code block

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>优先级</title>
    <style>
        h2{
           color: red; /*红色*/
       }
       .box{
            color: springgreen; /*绿色*/
       }
    </style>
</head>
  
<body>
    <h2 id="微笑是最初的信仰">微笑是最初的信仰</h2>
</body>
</html>

Result graph

Understand CSS selector priority and !important weight

.class selector and id selector

Let’s enter.class selector and id selector, which one has higher priority? Practice, the practice content is such as: setting the h2 tag in the HTML page Text color.

Code block

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>优先级</title>
    <style>
       h2{
           color: red; /*红色*/
       }
       .box{
            color: springgreen; /*绿色*/
       }
       #box{
           color:blue; /*蓝色*/
       }
    </style>
</head>
  
<body>
   <h2 id="微笑是最初的信仰">微笑是最初的信仰</h2>
</body>
</html>

Result graph

Understand CSS selector priority and !important weight

!important weight usage

Now we know the tag selector priority The lowest level, so I added the !important attribute to the tag selector. Who has a higher priority?
!important weight usage format is as follows:

color: red !important; /*红色*/

Note: Attribute: value !importantAttribute values can be separated by spaces.

Let's get into the !important attribute usage practice and see how powerful the !important attribute is.

Code block

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>!important使用</title>
    <style>
       h2{
           color: red !important; /*红色*/
       }
       .box{
            color: springgreen; /*绿色*/
       }
       #box{
           color:blue; /*蓝色*/
       }
    </style>
</head>
  
<body>
   <h2 id="微笑是最初的信仰">微笑是最初的信仰</h2>
</body>
</html>

Result graph

Understand CSS selector priority and !important weight

Summary

Priority from low to high such as: tag selector , .class selector, #id selector, !importantattribute

For more programming-related knowledge, please visit: Programming teaching! !

The above is the detailed content of Understand CSS selector priority and !important weight. For more information, please follow other related articles on the PHP Chinese website!

Statement

This article is reproduced at:博客园. If there is any infringement, please contact admin@php.cn delete

Using Pages CMS for Static Site Content ManagementMay 13, 2025 am 09:24 AM

I know, I know: there are a ton of content management system options available, and while I've tested several, none have really been the one, y'know? Weird pricing models, difficult customization, some even end up becoming a whole &

The Ultimate Guide to Linking CSS Files in HTMLMay 13, 2025 am 12:02 AM

Linking CSS files to HTML can be achieved by using elements in part of HTML. 1) Use tags to link local CSS files. 2) Multiple CSS files can be implemented by adding multiple tags. 3) External CSS files use absolute URL links, such as. 4) Ensure the correct use of file paths and CSS file loading order, and optimize performance can use CSS preprocessor to merge files.

CSS Flexbox vs Grid: a comprehensive reviewMay 12, 2025 am 12:01 AM

Choosing Flexbox or Grid depends on the layout requirements: 1) Flexbox is suitable for one-dimensional layouts, such as navigation bar; 2) Grid is suitable for two-dimensional layouts, such as magazine layouts. The two can be used in the project to improve the layout effect.

How to Include CSS Files: Methods and Best PracticesMay 11, 2025 am 12:02 AM

The best way to include CSS files is to use tags to introduce external CSS files in the HTML part. 1. Use tags to introduce external CSS files, such as. 2. For small adjustments, inline CSS can be used, but should be used with caution. 3. Large projects can use CSS preprocessors such as Sass or Less to import other CSS files through @import. 4. For performance, CSS files should be merged and CDN should be used, and compressed using tools such as CSSNano.

Flexbox vs Grid: should I learn them both?May 10, 2025 am 12:01 AM

Yes,youshouldlearnbothFlexboxandGrid.1)Flexboxisidealforone-dimensional,flexiblelayoutslikenavigationmenus.2)Gridexcelsintwo-dimensional,complexdesignssuchasmagazinelayouts.3)Combiningbothenhanceslayoutflexibilityandresponsiveness,allowingforstructur

Orbital Mechanics (or How I Optimized a CSS Keyframes Animation)May 09, 2025 am 09:57 AM

What does it look like to refactor your own code? John Rhea picks apart an old CSS animation he wrote and walks through the thought process of optimizing it.

CSS Animations: Is it hard to create them?May 09, 2025 am 12:03 AM

CSSanimationsarenotinherentlyhardbutrequirepracticeandunderstandingofCSSpropertiesandtimingfunctions.1)Startwithsimpleanimationslikescalingabuttononhoverusingkeyframes.2)Useeasingfunctionslikecubic-bezierfornaturaleffects,suchasabounceanimation.3)For

@keyframes CSS: The most used tricksMay 08, 2025 am 12:13 AM

@keyframesispopularduetoitsversatilityandpowerincreatingsmoothCSSanimations.Keytricksinclude:1)Definingsmoothtransitionsbetweenstates,2)Animatingmultiplepropertiessimultaneously,3)Usingvendorprefixesforbrowsercompatibility,4)CombiningwithJavaScriptfo

See all articles