css权重及优先级问题_html/css_WEB-ITnose-html教學-PHP中文網

首頁

web前端

html教學

css权重及优先级问题_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:32 AM

css权重及优先级问题

几个值的对比

初始值

指定值

计算值

应用值

CSS属性的指定值 (specified value)会通过下面3种途径取得：

在当前文档的样式表中给这个属性赋的值，会被优先使用。
如果在当前文档的样式表中没有给这个属性赋值，那么它会尝试从父元素那继承一个值。
如果上面的两种途径都不可行，则把CSS规范中针对这个元素的这个属性的初始值作为指定值

应用值（used value）是完成所有计算后最终使用的值。计算出CSS属性的最终值有三个步骤。

首先，指定值specified value 取自样式层叠 (选取样式表里权重最高的规则), 继承 (如果属性可以继承则取父元素的值)，或者默认值。

然后，按规范算出计算值computed value。

最后，计算布局(尺寸比如 auto 或百分数换算为像素值 )，结果即应用值used value。

这些步骤是在内部完成的，脚本只能使用 window.getComputedStyle 获得最终的应用值。

CSS 2.0 只定义了计算值 computed value 作为属性计算的最后一步。 CSS 2.1 引进了定义明显不同的的应用值，这样当父元素的计算值为百分数时子元素可以显式地继承其高宽。对于不依赖于布局的 CSS 属性 (例如 display, font-size, line-height)计算值与应用值一样，否则就会不一样

优先级

优先级是浏览器是通过判断哪些属性值与元素最相关以决定并应用到该元素上的。优先级仅由选择器组成的匹配规则决定的。

优先级是根据由每种选择器类型构成的级联字串计算而成的。他是一个对应匹配表达式的权重。

如果优先级相同，靠后的 CSS 会应用到元素上。

下列是一份优先级逐级增加的选择器列表：

通用选择器（*）

元素(类型)选择器

类选择器

属性选择器

伪类

ID 选择器

内联样式

!important 规则例外 Link

当 !important 规则被应用在一个样式声明中时,该样式声明会覆盖CSS中任何其他的声明, 无论它处在声明列表中的哪里. 尽管如此,!important规则还是与优先级毫无关系.使用 !important 不是一个好习惯，因为它改变了你样式表本来的级联规则，从而使其难以调试。

一些经验法则：

Never 永远不要在全站范围的 css 上使用!important

Only 只在需要覆盖全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定页面中使用!important

Never 永远不要在你的插件中使用!important

Always 要优化考虑使用样式规则的优先级来解决问题而不是!important

怎样覆盖掉 !important

很简单，你只需要再加一条 !important 的CSS语句，将其应用到更高优先级的选择器（在原有基础上添加额外的标签、类或 ID 选择器）上；

或是保持选择器一样，但添加的位置需要在原有声明的后面（优先级相同的情况下，后边定义的会覆盖前边定义的）。

:not 伪类例外

:not 否定伪类在优先级计算中不会被看作是伪类. 事实上, 在计算选择器数量时还是会把其中的选择器当做普通选择器进行计数.

无视DOM树中的距离

有如下样式声明:

body h1 {  color: green;}html h1 {  color: purple;}

当它应用在下面的HTML时:

<html><body>  <h1 id="Here-is-a-title">Here is a title!</h1></body></html>

浏览器会将它渲染成purple，即后面的优先级更高

外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

外边距合并初看上去可能有点奇怪，但是实际上，它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。

可替换元素

CSS 里，可替换元素是这样一些元素，其展现不是由CSS来控制的。这些外部元素的展现不依赖于CSS规范。典型的可替换元素有 css权重及优先级问题_html/css_WEB-ITnose 、

CSS在某些情况下会对可替换元素做特殊处理，比如计算外边距和处理值为 auto 的情况。

需要注意的是，一部分（并非全部）可替换元素，本身具有尺寸和基线，会被一些 CSS 属性用到，比如 vertical-align。

LINKS

MDN

w3school

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：構建Web內容Apr 11, 2025 am 12:12 AM

HTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容，使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。

HTML和代碼：仔細觀察術語Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代碼” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代碼”代碼“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

HTML，CSS和JavaScript：Web開發人員的基本工具Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web開發的三大支柱。 1.HTML定義網頁結構，使用標籤如、等。 2.CSS控製網頁樣式，使用選擇器和屬性如color、font-size等。 3.JavaScript實現動態效果和交互，通過事件監聽和DOM操作。

HTML，CSS和JavaScript的角色：核心職責Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

HTML容易為初學者學習嗎？Apr 07, 2025 am 12:11 AM

HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML中起始標籤的示例是什麼？Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。