css权威指南阅读笔记-第三章声明的层级

有时候对同一个目标元素,选择器有多种不同的写法。具体哪种声明会生效,主要看层叠关系

层叠关系主要看三层,分别是特殊性,权重和顺序。

1.特殊性

选择器有各自的特殊性。
内联样式为1000,id选择器为100,class选择器和属性选择器为10,各个元素为1,通配选择器为0(0比没有大,继承的特殊性就是没有,所以有继承和通配同时出现,采用通配选择器)。如
h1.box这个选择器的特殊性就是1+10=11。
当声明中有!important的时候,那么它的特殊性超过了内联样式。
继承的属性没有特殊性,即小于通配选择器0.颜色,宽度(没有浮动的情况下)可以被继承,其他的如高度,margin,border,padding无法被继承。

2. 权重

权重主要是指重要声明,也就是加了!important的声明。它特殊性高过任何没加!important的声明。
权重由大到小依次是
1. reader important
2 creater important
3 creater normal
4 reader normal
5 user agent

3 顺序排序

当权重,特殊性都一样,就是顺序排序。顺序在后面的声明层级高。

总结:层级的高低决定了应用哪个声明。

时间: 2024-12-20 05:40:58

css权威指南阅读笔记-第三章声明的层级的相关文章

css权威指南学习笔记--第七章

由于之前一直没有系统的看过css相关的书籍,导致自己css方面一直都是处于零散状态.知其然,不知其所以然.所以买了<css权威指南>.虽然比较老了,但是应该也会收获很大. 1 水平方向上 margin-left +border-left+padding-left+width+padding-right+border-right+margin-right 其中红色的是可以设置为auto,当设置为auto时,浏览器会自动计算该值.基于的原则就是 外层包裹容器的width=被包裹元素的width+p

css权威指南学习笔记--第6章

line-height:定义文本行基线之间的距离 <p style="line-height: 20px;"> these are test words<br /> these are test words </p> 说到line-height就不能不说到行框中各个高度是怎么计算的,这里引用css权威指南中的图 文本行中的每个元素都会生成一个内容区,这由字体的大小确定.如果不存在其他因素(如line-height)那么这个内容区的高度就是行内框的高度

css权威指南阅读笔记-第二章css选择器

css选择器有10+种.这里介绍几种常用的和他们的特点 1.元素选择器 如h1 h2 h3 a p 等一系列标签名 2 通配选择器 *,匹配所有html的元素 3 类选择器 class=‘a b'这种选择器在.a.b和.b.a是一样的,不区别先后顺序,另外类选择器区分大小写,class='A'在css中不能用.a匹配到,只能用.A匹配到 类选择器在页面中一般用于样式的复用 4 ID选择器 id选择器在页面中具有唯一性,并区分大小写,就是说box和BOX不是同一个ID 5 属性选择器 有4种模式

html5+css3 权威指南阅读笔记(三)---表单及其他新增和改良元素

一.新增元素及属性 1.表单内元素的form属性. html5: <form id="testForm"> <input type=text> </form> <textarea form = testForm></textarea> 2.表单内元素的formaction属性 <form id="testForm" action="test.jsp"> <input t

《Hadoop权威指南》笔记 第三章 并行复制及存档

distcp并行复制 ? ? ? ? ? ? ? ? ? ? Hadoop存档 ? ? ? ? ? ? ? ? ? ?

CSS权威指南学习笔记系列(1)CSS和文档

题外话:HTML是一种结构化语言,而CSS是它的补充:这是一种样式语言.CSS是前端三板斧之一,因此学习CSS很重要.而我还是菜鸟,所以需要加强学习CSS.这个是我学习CSS权威指南的笔记,如有不对,请谅解和指出.谢谢大家.正文: 第一章 CSS和文档---------- 1.CSS,称为层叠样式表.使用CSS的理由有:a.易于使用,样式表能大大减少Web创作人员的工作量:b.在多个页面上使用样式,可以创建一个样式表,然后把这个样式表应用到多个页面:c.层叠,CSS还规定了冲突规则:这些规则统称

C++PRIMER 阅读笔记 第三章

本章主要介绍 string vector 和 bitset, 不能贪多,现在本文主要介绍 string 与 vector 头文件中最好不要使用namespace std, 因为头文件会直接被预处理器放置到C中 std::string 的构造方式: string s1; string s2(s1); string s3("value");string s4(n,'c');           第三种构造方式可有"\0"? cout 与 cin 可以直接操作string

人月神话阅读笔记—第三章

人月神话阅读笔记-第三章 一个由一流人才组成的小型的精干的队伍比由一群平庸的程序员组成的大型团队更有效率,但是这里面有一个重要的问题:如何在有意义的进度安排内创建大型的系统. 优秀的程序员和较差的程序员之间生产效率的差距是巨大的,当一个10人的精干团队进行开发,和一个100个人的平庸程序员进行开发,前者的效率更高.但是对于效率和概念的完成性来说,最好由少数干练人员开发,而大型系统需要大量人员进行开发,但是这两者是有矛盾的,需要进行平衡. 在开发过程中,可以使用一种崭新的开发方案,类似于外科医生做

css权威指南 读书笔记

网上看见推荐的书总是喜欢买回家,但是大多数时候都不会立即就看,都是在书橱里蒙上了一层灰尘.从毕业到现在,由于公司业务原因,写js多余css,所以就想系统地看看css,并且做一些练习,于是就开始看<css权威指南>,看到了第六章,初步感觉,对于工作一年的我来说,很简单,当然也有一些我不熟悉的知识点,于是整理了下来. 一.@import 1.放在style容器中,且在其他css规则之前 2.每个人@import指令的样式都会加载使用 二.选择器 1.:first-letter 用于选取指定选择器的