Element selector>Class selector>Attribute selector>Pseudo class>ID selector>Inline style"."/> Element selector>Class selector>Attribute selector>Pseudo class>ID selector>Inline style".">
search
HomeWeb Front-endFront-end Q&AWhat types of css style sheets are there? What is selector priority?

What types of css style sheets are there? What is selector priority?

Jul 27, 2021 pm 04:26 PM
css stylesheetprioritySelector

There are three types of css style sheets: inline style sheets, internal style sheets and external style sheets. The selector priority is: "Universal selector>Element selector>Class selector>Attribute selector>Pseudo-class>ID selector>Inline style".

What types of css style sheets are there? What is selector priority?

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

What are the types of css style sheets?

According to the position where the CSS style is written (or the way it is introduced), CSS style sheets can be divided into the following three categories:

1. Inline style sheets

Inline style is to put the CSS style directly in the tag within the line of code. It is usually placed in the style attribute of the tag. Since the inline style is directly inserted into the tag, it is the most direct way. method, and it is also the most inconvenient style to modify.

Example:

<p style="background-color: #999900">行内元素,控制段落-1</p>

2. Internal style sheet

The internal style sheet is contained in the

If a web document contains multiple

Example:

<style>
div {
color: blue;
font-size: 16px;
}
</style>

3. External style sheet

If the CSS style is placed in a file outside the web page document, it is called an external style. table, a CSS style sheet document represents an external style sheet.

In fact, the external style sheet is a text file with the extension .css. When you copy the CSS style code into a text file and save it as a .css file, it is an external style sheet.

In the HTML page, use the tag to introduce the file. The specific introduction code is as follows:

<link rel="styleheet" href="css文件路径">

Priority of multiple style sheets:

Inline style inline style > Internal style sheet > External style sheet External style sheet > Browser default style

The following is an explanation of selector priority and an explanation of weight It's good, so I excerpted it from the novice tutorial

Priority is determined by the browser and applied to the element by judging which attribute values ​​​​are most relevant to the element. The priority is determined only by the matching rules composed of selectors.

Priority is a weight assigned to a specified CSS declaration, which is determined by the value of each selector type in the matching selector.

What is the selector priority?

The following is a list of selectors with increasing priority:

  • Universal selector (*)
  • Element (type ) selector
  • Class selector
  • Attribute selector
  • Pseudo class
  • ID selector
  • Inline style

!important rule exceptions

When the !important rule is applied to a style declaration, the style declaration overrides any other declaration in CSS, no matter where it is in the declaration list . However, !important rules have nothing to do with priorities. Using !important is not a good practice because it changes the original cascading rules of your stylesheet, making it difficult to debug.

Some rules of thumb:

  • ##Always To optimize consider using the priority of style rules to solve the problem instead of !important
  • Only Use only in specific pages that need to cover the entire site or external css (such as referenced ExtJs or YUI) !important
  • Never Never use in site-wide css !important
  • Never Never use !important ## in your plugins
  • #Weight calculation:

Explanation:

1. The maximum weight of the inline style sheet is 1000 ;
  • 2. The weight of the ID selector is 100
  • 3. The weight of the Class selector is 10
  • 4. The weight of the HTML tag selector is 1
  • Use the weight of the selector to calculate and compare, em displays blue, the example is as follows: https://c.runoob.com/codedemo/3048

CSS priority rule:

  • A Each selector has a weight, the greater the weight, the priority;
  • B When the weights are equal, the style sheet that appears later Settings should take precedence over the style sheet settings that appear first;
  • C The creator’s rules are higher than those of the viewer: that is, the CSS style set by the web page writer has priority over the style set by the browser;
  • D The inherited CSS style is not as good as the CSS style specified later;
  • E The rule marked with "!important" has the highest priority in the same set of property settings; the example is as follows: https://c.runoob. com/codedemo/3049
    Result: Displayed in blue under Firefox; Displayed in red under IE 6;

(Learning video sharing: css video tutorial)

The above is the detailed content of What types of css style sheets are there? What is selector priority?. For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
The Benefits of React's Strong Community and EcosystemThe Benefits of React's Strong Community and EcosystemApr 29, 2025 am 12:46 AM

React'sstrongcommunityandecosystemoffernumerousbenefits:1)ImmediateaccesstosolutionsthroughplatformslikeStackOverflowandGitHub;2)Awealthoflibrariesandtools,suchasUIcomponentlibrarieslikeChakraUI,thatenhancedevelopmentefficiency;3)Diversestatemanageme

React Native for Mobile Development: Building Cross-Platform AppsReact Native for Mobile Development: Building Cross-Platform AppsApr 29, 2025 am 12:43 AM

ReactNativeischosenformobiledevelopmentbecauseitallowsdeveloperstowritecodeonceanddeployitonmultipleplatforms,reducingdevelopmenttimeandcosts.Itoffersnear-nativeperformance,athrivingcommunity,andleveragesexistingwebdevelopmentskills.KeytomasteringRea

Updating State Correctly with useState() in ReactUpdating State Correctly with useState() in ReactApr 29, 2025 am 12:42 AM

Correct update of useState() state in React requires understanding the details of state management. 1) Use functional updates to handle asynchronous updates. 2) Create a new state object or array to avoid directly modifying the state. 3) Use a single state object to manage complex forms. 4) Use anti-shake technology to optimize performance. These methods can help developers avoid common problems and write more robust React applications.

React's Component-Based Architecture: A Key to Scalable UI DevelopmentReact's Component-Based Architecture: A Key to Scalable UI DevelopmentApr 29, 2025 am 12:33 AM

React's componentized architecture makes scalable UI development efficient through modularity, reusability and maintainability. 1) Modularity allows the UI to be broken down into components that can be independently developed and tested; 2) Component reusability saves time and maintains consistency in different projects; 3) Maintainability makes problem positioning and updating easier, but components need to be avoided overcomplexity and deep nesting.

Declarative Programming with React: Simplifying UI LogicDeclarative Programming with React: Simplifying UI LogicApr 29, 2025 am 12:06 AM

In React, declarative programming simplifies UI logic by describing the desired state of the UI. 1) By defining the UI status, React will automatically handle DOM updates. 2) This method makes the code clearer and easier to maintain. 3) But attention should be paid to state management complexity and optimized re-rendering.

The Size of React's Ecosystem: Navigating a Complex LandscapeThe Size of React's Ecosystem: Navigating a Complex LandscapeApr 28, 2025 am 12:21 AM

TonavigateReact'scomplexecosystemeffectively,understandthetoolsandlibraries,recognizetheirstrengthsandweaknesses,andintegratethemtoenhancedevelopment.StartwithcoreReactconceptsanduseState,thengraduallyintroducemorecomplexsolutionslikeReduxorMobXasnee

How React Uses Keys to Identify List Items EfficientlyHow React Uses Keys to Identify List Items EfficientlyApr 28, 2025 am 12:20 AM

Reactuseskeystoefficientlyidentifylistitemsbyprovidingastableidentitytoeachelement.1)KeysallowReacttotrackchangesinlistswithoutre-renderingtheentirelist.2)Chooseuniqueandstablekeys,avoidingarrayindices.3)Correctkeyusagesignificantlyimprovesperformanc

Debugging Key-Related Issues in React: Identifying and Resolving ProblemsDebugging Key-Related Issues in React: Identifying and Resolving ProblemsApr 28, 2025 am 12:17 AM

KeysinReactarecrucialforoptimizingtherenderingprocessandmanagingdynamiclistseffectively.Tospotandfixkey-relatedissues:1)Adduniquekeystolistitemstoavoidwarningsandperformanceissues,2)Useuniqueidentifiersfromdatainsteadofindicesforstablekeys,3)Ensureke

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

mPDF

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools

EditPlus Chinese cracked version

EditPlus Chinese cracked version

Small size, syntax highlighting, does not support code prompt function