`
ice-cream
  • 浏览: 329152 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类
最新评论

《css实战手册》读书笔记——管理多种样式公式

    博客分类:
  • Css
阅读更多

   最近正在看《CSS实战手册》这本书,发现第五章管理多种样式中的样式优先级公式挺实用的。

   有时候我们给同样一个属性用多种方式去定义样式,来自最具体的样式的属性会胜出,但不知道到底哪种样式最具体,好在css还提供了一个公式,他根据指派给样式选择器的值决定样式的特性——标签选择器、类选择器、ID选择器,等等。这个系统是这样进行的:

   1.一个标签选择器值1分。

   2.一个类选择器值10。

   3.一个ID选择器值100分。

   4.一个行内样式(如:style)值1000分。  

数字越大。特性就越大。(如图)

 

当不止一个样式应用给一个标签是,一旦样式属性有冲突,网页浏览器必须决定哪个样式要“胜出”。在css中一个样式的重要性称作特征。它取决于创建这个样式时所用的选择器类型。每种选择器类型有一个不同的值,并且当多个选择器类型出现在一个样式中时——例如派生选择器#banner p——所用的所有选择器的值要加在一起。

注意:伪元素(例如像:first-child)被当作标签选择器对待时值1分。伪类(例如:link)被当作类对待时值10分。

 

 

分享到:
评论
7 楼 rj045wq 2008-07-22  
帮助新手理解而已,熟练了还是别这么记。
6 楼 naodai 2008-04-24  
分值越大,优先级越高!
5 楼 mackyliu 2008-04-23  
没看明白是什么意思,分越大就表示越不推荐使用还是什么意思?
4 楼 ctguharry 2008-04-02  
分值只是用来形象的说明问题而已
3 楼 tiger.passion 2008-03-31  
不同选择器优先级不同,记分值的方式,只是一种从通常使用中被某人归纳出来的一种简单的规律,但这并不是一种理论依据。
1000个类选择器也抵不上1个id选择器的
  只是通常情况下我们不会用到10个或是1000个类而已。所以大家一般情况可以按照记分值的方式去使用,但最好不要那样去理解~
2 楼 温柔一刀 2008-03-29  
引入打分机制只是作者用来说明优先级的问题

并不是说打分是css里面的标准

也不是说11个类选择器的优先级加起来大于一个ID选择器
1 楼 hax 2008-03-29  
不知道打分这种谬误哪里传出来的,我已经不是第一次看到了。

优先级不是按打分来计算的。1000个类选择器也抵不上1个id选择器的。

相关推荐

    CSS实战手册(4)

    CSS实战手册(CSS - The Missing Manual) E文的分卷压缩(共9卷)!

    CSS实战手册 代码

    《CSS实战手册 代码》是一本专注于实际应用的CSS学习资料,它包含了丰富的代码示例和源码,旨在帮助读者深入理解CSS的工作原理,并能够熟练地应用到网页设计中。CSS,即层叠样式表(Cascading Style Sheets),是...

    CSS实战手册(3)

    CSS实战手册(CSS - The Missing Manual) E文的分卷压缩(共9卷)!

    《CSS实战手册(第2版)》书后附录

    《CSS实战手册(第2版)》的出现,为许多在这一领域努力提升自我能力的开发者们提供了一本实用的参考书。本书不仅深入讲解了CSS技术,还特别在书后附录部分,提供了丰富的实用信息和参考资料,这无疑是对正文内容的...

    css实战手册 源码(完全)

    《CSS实战手册 源码(完全)》是一本针对CSS初学者和进阶者精心编写的实战指南,旨在帮助读者深入理解CSS语言并提升实际应用能力。这本手册不仅包含了丰富的理论知识,还提供了完整的源码实例,使得学习过程更具实践...

    CSS实战手册.zip

    CSS实战手册 第四版(中文版+练习题),从基础知识入手。编写对 CSS 友好的 HTML 代码,包括现今的浏览器能识别的 HTML5 标签。为移动设备设计。创建对移动设备友好的网页,以便访客随时随地浏览。

    CSS实战手册.中文第2版.完整书签(2)

    CSS实战手册.中文第2版.完整书签(1)  本书从介绍最基本的CSS知识开始,到建立用于打印网页的CSS和改进你的CSS习惯的最佳实践。将关于CSS的选择器、继承、层叠、格式化、边距、填充、边框、图片、网站导航、表格、...

    《CSS网站布局实战》——实例源码包

    《CSS网站布局实战》这本书是Web开发者们学习和提升CSS布局技能的重要参考资料。该实例源码包包含了书中各个章节的实战示例代码,为读者提供了实际操作和理解CSS布局概念的平台。通过深入研究这些源码,我们可以深入...

    css3.0参考手册 css3.0参考手册

    css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css...

    CSS高效开发实战——CSS 3、LESS、SASS、Bootstrap、Foundation

    《CSS高效开发实战——CSS 3、LESS、SASS、Bootstrap、Foundation》内容精练、重点突出、实例丰富、讲解通俗,是广大CSS设计人员和前端开发人员必备的参考书,同时也非常适合大中专院校师生学习阅读,也可作为高等...

    CSS实战手册

    《CSS实战手册》应该成为每一个喜爱网页设计的人手头必备的一本书,比起上面那本书来,这本书要更深入一些,讲得也更细致一些。书中每一章的最后都有一个实例教程,读完每一张的内容再完成这个教程,对巩固你的CSS...

    尚硅谷(李立超)——HTML5&CSS3笔记总结【持续更新】

    尚硅谷(李立超)——HTML5&CSS3笔记总结【持续更新】 本文适合前端菜鸟食用,小编自己整理的李立超老师视频的笔记,手打不易,那就望您每年快乐吧。逃) 一、进制 1.十进制(日常使用): 特点:满10进1 计数:0 1 ...

    CSS实战手册源代码

    《CSS实战手册》荣获第17届Jolt技术图书生产力大奖,该书选材贴切,内容详实。它即讲解了CSS的基础知识,又分享了很多实践的心得。尤其每章最后的实战教程最是宝贵,理论后的实践能让我们学而有成,成能见效。特将...

    CSS实战手册(2)

    CSS实战手册(CSS - The Missing Manual) E文的分卷压缩(共9卷)!

    CSS实战手册(1)

    CSS实战手册(CSS - The Missing Manual) E文的 分卷压缩(共9卷)!

    CSS实战手册(5)

    CSS实战手册(CSS - The Missing Manual) E文的 分卷压缩(共9卷)!

    CSS实战手册(8)

    CSS实战手册(CSS - The Missing Manual) E文的 分卷压缩(共9卷)!

    [CSS3] CSS3 实战手册 第3版 (英文版)

    [奥莱理] CSS3 实战手册 第3版 (英文版) [奥莱理] CSS3 The Missing Manual 3rd Edition (E-Book) ☆ 图书概要:☆ CSS3 lets you create professional-looking websites, but learning its finer points can be ...

    纯CSS清爽新闻列表布局——给新手看.rar

    这个压缩包“纯CSS清爽新闻列表布局——给新手看.rar”显然是为了帮助初学者掌握如何使用CSS来创建一个清晰、简洁的新闻列表布局。下面我们将深入探讨CSS在构建这种布局中的关键知识点。 1. **CSS盒模型**:在CSS中...

Global site tag (gtag.js) - Google Analytics