CSS选择器的优先级_html/css_WEB-ITnose-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

CSS选择器的优先级_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 08:51 AM

分类：WEB前端时间： 2016年3月13日

在PHP程序员雷雪松的博客前面的文章已经详细的介绍了CSS选择器和CSS常用的属性和值。下面再讲解一下CSS选择器的优先级。什么叫CSS选择器优先级呢？简单的讲就是浏览器通过CSS选择器组成的匹配规则判断定义的多条CSS指令优先级，决定最忠元素显示的属性值。那下面就具体的看看关于CSS选择器优先级的规则。

1、通过CSS选择器文件引入的方式。

（外部样式）External style sheet

2、CSSS选择器的优先权，

a. 内联样式表的权值最高1000

b. ID 选择器的权值为100

c. Class 类选择器或者属性选择符或者伪类的权值为10

d. HTML标签选择器或者伪元素选择符的权值为1

e.全局选择符*权值为0

3、!important 规则通常拥有最高级别的规则，同样的CSS选择优先级后面的覆盖前面，自定义的CSS样式优先级大于CSS继承的和浏览器默认CSS的优先级。

4、关于CSS选择器优先级的具体示例。

选择器	计算结果
* { }	0
p { }	1 (HTML标签选择器)
li:first-line { }	2 (HTML标签选择器,伪元素选择器)
div span { }	2 (2个HTML标签选择器)
ul ol+li { }	3 (3个HTML标签选择器)
h1 + *[rel=up] { }	11 (HTML标签选择器，属性选择器)
dl dt.red { }	13 (一个CLASS类选择器,3个HTML标签选择器)
h2.red.level { }	21 (两个CLASS类选择器,HTML标签选择器)
style=””	10,0,0 (行内样式)
#page	100 (ID选择器)
body #main .left p { }	112 (两个HTML标签选择器,ID选择器, CLASS选择器类)

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

What is the root tag in an HTML document?Apr 29, 2025 am 12:10 AM

TheroottaginanHTMLdocumentis.Itservesasthetop-levelelementthatencapsulatesallothercontent,ensuringproperdocumentstructureandbrowserparsing.

Are the HTML tags and elements the same thing?Apr 28, 2025 pm 05:44 PM

The article explains that HTML tags are syntax markers used to define elements, while elements are complete units including tags and content. They work together to structure webpages.Character count: 159

What is the significance of <head> and <body> tag in HTML?Apr 28, 2025 pm 05:43 PM

The article discusses the roles of <head> and <body> tags in HTML, their impact on user experience, and SEO implications. Proper structuring enhances website functionality and search engine optimization.

What is the difference between <strong>, <b> tags and <em>, <i> tags?Apr 28, 2025 pm 05:42 PM

The article discusses the differences between HTML tags , , , and , focusing on their semantic vs. presentational uses and their impact on SEO and accessibility.

Please explain how to indicate the character set being used by a document in HTML?Apr 28, 2025 pm 05:41 PM

Article discusses specifying character encoding in HTML, focusing on UTF-8. Main issue: ensuring correct display of text, preventing garbled characters, and enhancing SEO and accessibility.

What are the various formatting tags in HTML?Apr 28, 2025 pm 05:39 PM

The article discusses various HTML formatting tags used for structuring and styling web content, emphasizing their effects on text appearance and the importance of semantic tags for accessibility and SEO.

What is the difference between the 'id' attribute and the 'class' attribute of HTML elements?Apr 28, 2025 pm 05:39 PM

The article discusses the differences between HTML's 'id' and 'class' attributes, focusing on their uniqueness, purpose, CSS syntax, and specificity. It explains how their use impacts webpage styling and functionality, and provides best practices for

What is the 'class' attribute in HTML?Apr 28, 2025 pm 05:37 PM

The article explains the HTML 'class' attribute's role in grouping elements for styling and JavaScript manipulation, contrasting it with the unique 'id' attribute.

See all articles