CSS教程:详解CSS特定值

2016-02-20 00:16 5 1 收藏

最近很多朋友喜欢上设计,但是大家却不知道如何去做,别担心有图老师给你解答,史上最全最棒的详细解说让你一看就懂。

【 tulaoshi.com - Web开发 】

以前我从来没有具体的谈到这个问题


     最好的解释方法是用一个例子来说明那的特性引起了你的困惑或则没有按照预期的显示。然后我们将近距离的细看计算实际的值来选择最优的选择器。
     这是一个简单的例子 无序的列表:
 <ul id="summer-drinks">

<li>Whiskey and Ginger Ale/li</li>

<li>Wheat Beer</li>

<li>Mint Julip</li>

</ul>

现在你想指定他们中间你最喜欢的酒并且把它的样式做一点变化,你需要通过这个列表元素上的一个类名来实现它。

   <ul id="summer-drinks">

<li class="favorite ">Whiskey and Ginger Ale/li</li>

<li>Wheat Beer</li>

<li>Mint Julip</li>

</ul>

现在,你打开CSS写出你的新样式类:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/).favorite
{
  color: red;
  font-weight: bold;
}


然后你你看着自己的工作,但是不幸的是,他并不起作用,你喜欢酒的文本没有变为红色或则加粗。一些可以的东西在起作用。在CSS样式中你会发现还有下面的这个语句:


你的麻烦在这,两个不动的Css选择器竟然同时定义了字体的颜色和字体的粗细。说明字体大小的语句只有一个。所以很明显起作用的只有一个选择器。两个选择器不是在战斗,但是浏览器不需要决定它们中间那一个语句是荣耀的。浏览器是根据具体规则的标准设置。我想这困惑这一些初学者,因为他们还没有完全理清这些东西。他们可能认为.favorite是胜利的哪一个:favorite语句是进一步的CSS样式,或者是因为在HTML中class=favorite 离实际文本近一些。

但是,事实上,在CSS中选择器的顺序扮演者一个重要的角色而且进一步的的那个语句事实上是胜利的当特定值是一样的精确。

.favorite

 {


 }

字体的颜色将是黑色的。。。。但是我却不敢不苟同。

这里的重点在:对于你的每一个机会,你要尽可能的详细使它是有意义的。尽管用这个简单的例子可以代表上面的例子。   但是它更明显的显示 :简单的运用一个类名来指向 favorite drink ,是不能覆盖红色的字体属性。它也将不会是非常安全的即使它是起作用的。下面的用法可能是明智的:     

}

这就是我叫的你要尽可能的详细使它是有意义的。你实际上可以使用更确切的方法使用这些属性,像这样:

}

但是它是从顶部开始的,它使你的CSS样式不具有易读性并且产生真正的好处。



刚才为什么我们第一次尝试改变字体的大小和颜色失败了呢? 随着我们的学习,它是因为标签自己简单的运用类名,拥有较低的特性值,被其他的指向这个无序列表的具有ID值的选择器压倒。在那个句子中,重要的字眼是class和 ID。CSS不关心用class 和IDs做什么,但是它却给他们赋予不同的特定权重。事实上,一个ID拥有比一个class大10倍的特定权重。让我们看看特定值是怎么计算的:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

 



假如元素有内联样式,那它将自动的拥有100点 每一个ID值100点 每一个类名(或者伪类,属性选择器),10点 每一个元素1点     










注意事项:

以上的例子是非常接近的CSS是如何计算的特殊性价值,但是那是重要的例外。数字并不是真正的像在十进制中加在一起,而是基于一种无限方式的组合在一起,所以231实际上像2,3,1。重要的区别在(points out)假如任意一个数字超过了9,将不像十进制那样向前进一位。所以一个选择器的特定值可以是2,11,1.它不能被计算成311,谢谢下面的 也谢谢 Eric关于这种区别的页面。

资源:Smashing Magazine has a pretty comprehensive article on CSS Specificity W3 specs IE Quirks (try viewing this page in Fx and then IE) Fuzzy Specificity Hack: IE (even beta 8!) and older Opera browsers have a bug honoring the correct selector under specific circumstances.
译者注:由于译言发布译文是会自动解释示例HTML代码所以,用了很多方式都不是太理想,最后译者把标签的用全角的< >代替所以代码示例不是很美观,还请见谅,还希望译言早日支持HTML源码显示。

来源:http://www.tulaoshi.com/n/20160220/1631567.html

延伸阅读
标签: Web开发
当你想在一个浏览器里改变样式而不像在其他浏览器中改变时,这些选择器很有用。 IE6以下 *html{} IE 7 以下 *:first-child+html {} * html {} 只对IE 7 *:first-child+html {} 只对IE 7 和现代浏览器 htmlbody {} 只对现代浏览器(非IE 7) html/**/body {} 最新的Opera 9以下版本 html:first-child {} Safari html[xmlns*=&qu...
标签: Web开发
nettuts带来的5个css书写技巧,简单翻译一下它的中心思想。 1. CSS Reset/重置 你也许需要先了解什么是css重置。然后怎么样写css重置呢。 你可以copy Eric Meyer Reset, YUI Reset或其它css reset, 但你接下来应该根据你的项目改成你自己的reset.不要使用* { margin: 0; padding: 0; } 。我个人很爱用,
标签: Web开发
CSS组合 你不必重复有相同属性的多个选择符,你只要用英文逗号(,)隔开选择符就可以了。 比如,你有如下的代码: h2 { color: red; } .22333 { color: red; } .22333com { color: red; } 则你可以这样写: h2,.22333,.22333com { color: red; } 使用组合,你可以一次定义多个CSS,为你节省很多字节和时间。 CSS嵌套 ...
标签: Web开发
什么是CSS? CSS是CascadingStyleSheets(层叠样式表)的缩写。它的作用是定义网页的外观(例如字体,颜色等等),它也可以和javascript等浏览器端脚本语言合作做出许多动态的效果。   谁需要学习CSS? 对于想要使用XHTML制作符合W3C国际Web标准网站的站长,CSS是必须学习的,它几乎是你定义网页外观的唯一工具;而对于那些毫不关心Web标...
标签: Web开发
CSS 盒模型 网页设计中的每个元素都是长方形的盒子。 盒子的尺寸是怎样精确计算的,请看下图: 如果是 Firebug 用户的话(基本和前端有关的都会用到 Firebug 吧 – 糖伴西红柿),就会很熟悉下面的图表了。 这个图表很好地展示了作用于页面上任意盒子的数值。 注意以上两个例子中,margin 都是白色的。Margin 比较特别,它不会影...

经验教程

842

收藏

43
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部