据MDN -级联和继承的initial价值
将应用于选定元素的属性值设置为与在浏览器默认样式表中为该元素上的该属性设置的值相同
所有主要浏览器中锚元素的默认颜色都是蓝色。例如,Chrome 的默认样式表为锚元素定义了以下样式:
a:-webkit-any-link {
color: -webkit-link;
text-decoration: underline;
cursor: pointer;
}
Run Code Online (Sandbox Code Playgroud)
其中-webkit-link解析为蓝色。
鉴于此,我希望锚元素的文本在使用color: initial. 但取而代之的是黑色。为什么?
经过一番调查,我发现MDN自相矛盾这里的写作
初始值不应与浏览器样式表指定的值混淆。
我很迷惑。哪个论述是对的?
如果后者为真,我在哪里可以找到不同浏览器的元素初始值?为什么初始值应该与浏览器样式表中指定的不同?
好问题!我认为您在 MDN 上发现了一个错误,我已更正该错误。让我们尝试解释到底发生了什么。
\n根据规范,值为initial是指该属性的“初始值”。
\n\n如果属性的级联值为initial关键字,则property\xe2\x80\x99s指定的值就是它的初始值。
\n
根据规格属性的初始值是预定义的默认值。
\n\n\n每个属性都有一个初始值,在 property\xe2\x80\x99s 定义表中定义。如果该属性不是继承的属性,并且级联没有产生值,则该属性的指定值是其初始值。
\n
因此,每个属性都有一个默认值,称为“初始值”,由规范强制执行。初始值不由浏览器决定*。该规范在其定义表中列出了属性的初始值,请参阅属性索引。旧版本的规范维护了一个单独的列表,请参阅属性表。
\n例如,margin的初始值为0。或者color初始值为black *。
如果属性的值未在级联中设置(并通过继承),则它将采用此初始值。但是,重要的是要理解,如果不设置该属性,并不意味着级联不会产生值。
\n浏览器有一个应用于每个文档的样式表。该样式表的优先级低于您的样式表,因此仅在您不覆盖它的情况下才适用。它为属性设置的值可以是任何值,就像样式表中的值一样。浏览器样式表就像您的样式表一样,但是您没有编写,也从未见过,只是被神奇地应用了,对您来说是不可见的。要查找浏览器样式表,请参阅如何查找浏览器的默认样式表?
\n如果您没有为属性添加指定值,但浏览器样式表这样做了,那么对您来说,这似乎是初始值,但实际上并非如此!这确实非常令人困惑!它使浏览器样式表中的值看起来像初始值,但实际上并非如此。在使用 value 时可以注意到这种微妙的差异initial,它将属性设置回初始值。您可以认为它删除了浏览器样式表中的值。
我认为目前浏览器包含浏览器样式表的想法是否是一个好主意是值得怀疑的。在早期,它显然使创建网页变得更加简单,因为作者不需要做任何样式。但如今,作者自定义了网页的样式,并且不再有合理的默认样式。此外,作者也不希望他们的文档在不同的浏览器中看起来有所不同。浏览器不可见的默认样式只是另一个隐藏的错误来源。
\n对于锚元素,浏览器样式表将颜色设置为蓝色(如果它有属性href)。这使得它看起来像是blue锚元素颜色属性的初始值。但事实上, color 属性的初始值是黑色,当你设置 value 时你会看到它initial。只是浏览器样式表“为您”设置了锚元素的样式,而您却没有注意到。
请注意,初始值是属性的特征。它不关心元素。对于一个元素或另一个元素来说,它不能有所不同。浏览器样式表可能会选择仅针对某些元素或某些条件设置属性的样式,就像您自己的样式表一样。这可能会使属性的初始值对于不同的元素或条件看起来不同,但实际上并非如此。
\n例如,浏览器样式表为锚元素blue(如果它有href属性)着色,但不为段落元素着色。不同元素具有不同值的属性表明浏览器样式表正在发挥其魔力。
1一些属性(包括color)表明
\n\n初始:取决于用户代理
\n
但这并不意味着使用了用户代理样式表!而是初始值
\n\n\n\n[..]取决于[用户代理]的首选项设置等
\n
例如,Firefox 允许在设置中指定color、background-color、font-family、等属性的初始值。font-size
不过,令人困惑的是,相同的设置也允许设置浏览器样式表的属性,例如链接颜色。可以推断出这是因为这些值仅适用于某些元素,而初始值需要适用于该属性存在的每个元素。
\n| 归档时间: |
|
| 查看次数: |
301 次 |
| 最近记录: |