声明值和指定值有什么区别? [英] what is the difference between Declared Values and Specified Values?

查看:35
本文介绍了声明值和指定值有什么区别?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

声明的值指定值使我困惑.

起初,我以为作者写的声明的值

,然后将其过滤为一个值获胜价值" ,该获胜价值成为.


一个简单的示例可能会有所帮助.假设我们有这个html

 <!DOCTYPE html>< title>我的演示</title>< style>#foo {color:orange}.content {color:red}div {color:blue}</style>< div class ="content"&L; Lorem ipsum dolor sit amet</div> 

然后有三个规则.

  #foo {color:orange} 

不适用于我们的div,因为它没有ID为"foo".

orange 不是我们div的color属性的声明值.

  .content {color:red} 

适用于我们的div,因为它具有类"content". red 是我们div的color属性的声明值.

  div {color:blue} 

也适用于我们的div,因为它是一个div元素. blue 也是我们div的color属性的声明值.

现在应用级联.两个声明值声明的来源和重要性相同,因此使用特异性在两者之间进行选择.规则 .content {color:red} 具有更高的特异性,因此它提供了获胜"值.

因此,

red 是我们div的color属性的指定值.

The difference between Declared Values and Specified Values confused me .

at first I thought the Declared Values written by author

and then it filter out to one value "winning value" this winning value becomes the Cascaded Values

but latter the spec defining Specified Values

The specified value is the value of a given property that the style sheet authors intended for that element.

so this make me rethink about Declared Values is it the default value for element ? if yes it should be one default value as I know but it looks there are multiples values and cascading rules applied to get one value "winning value".


解决方案

Probably a simple example will help. Suppose we have this html

<!DOCTYPE html>
<title>My demo</title>
<style>
  #foo { color:orange }
  .content { color:red }
  div { color:blue }
</style>
<div class="content">Lorem ipsum dolor sit amet</div>

then there are three rules.

#foo { color:orange }

does not apply to our div because it does not have the id "foo". orange is not a declared value for the color property of our div.

.content { color:red }

applies to our div because it has class "content". red is a declared value for the color property of our div.

div { color:blue }

also applies to our div because it is a div element. blue is also a declared value for the color property of our div.

Now the cascade is applied. The origin and importance of both the declared value declarations are the same so specificity is used to choose between two. The rule .content { color:red } has the higher specificity so it provides the "winning" value.

red is therefore the specified value for the color property of our div.

这篇关于声明值和指定值有什么区别?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆