CSS的继承性和层叠性

继承性

有一些属性,当给自己设置的时候,自己的后代都继承上了,这个就是继承性。 哪些属性能继承? color、 text-开头的、line-开头的、font-开头的。 这些关于文字样式的,都能够继承; 所有关于盒子的、定位的、布局的属性都不能继承 这些关于文字样式的,都能够继承; 所有关于盒子的、定位的、布局的属性都不能继承

1    body{
2    color:gray;
3    font-size:14px;
}

继承性是从自己开始,直到最小的元素。

层叠性

很多公司如果要笔试,那么一定会考层叠性。

层叠性:就是css处理冲突的能力。 所有的权重计算,没有任何兼容问题! CSS像艺术家一样优雅,像工程师一样严谨。

当选择器,选择上了某个元素的时候,那么要这么统计权重: id的数量,类的数量,标签的数量

255个类等于一个id 255个标签等于一个id 但是没有意义

不进位,实际上能进位但是没有实战意义!

如果权重一样,那么以后出现的为准:

如果不能直接选中某个元素,通过继承性影响的话,那么权重是0。

如果大家都是0,那么有一个就近原则:谁描述的近,听谁的。

权重问题大总结: 1) 先看有没有选中,如果选中了,那么以(id数,类数,标签数)来计权重。谁大听谁的。如果都一样,听后写的为准。 2) 如果没有选中,那么权重是0。如果大家都是0,就近原则。

css3:盒模型、浮动 css4:定位

css5:背景、表格 css6:切图

下列都是IE6兼容的选择器:
p
#box
.spec
div.box
div .box
div , .box
*
下列都是IE7开始兼容:
div>p
div+p
下列都是IE8开始兼容:
div p:first-child
div p:last-child

继承性:好的事儿。继承从上到下,哪些能?哪些不能?
层叠性:冲突,多个选择器描述了同一个属性,听谁的?
同一个标签,携带了多个类名,有冲突:
1   <p class="spec1 spec2">我是什么颜色?</p>
2   <p class="spec2 spec1">我是什么颜色?</p>
和在标签中的挂类名的书序无关,只和css的顺序有关:
1       .spec2{
2           color:blue;
3       }
4       .spec1{
5           color:red;
6       }
7   </style>
红色的。因为css中red写在后面。
!important标记
important是英语里面的“重要的”的意思。我们可以通过语法:
1k:v !important;
来给一个属性提高权重。这个属性的权重就是无穷大。
一定要注意语法:
正确的:
1font-size:60px !important;
错误的:
1font-size:60px; !important;     → 不能把!important写在外面
1font-size:60px important;      →  不能忘记感叹号

需要强调: 1) !important提升的是一个属性,而不是一个选择器 2) !important无法提升继承的权重,该是0还是0 由于div是通过继承性来影响文字颜色的,所以!important无法提升它的权重,权重依然是0。 干不过p标签,因为p标签是实实在在选中了,所以字是蓝色的(以p为准)。 3)!important不影响就近原则 如果大家都是继承来的,按理说应该按照“就近原则”,那么important能否影响就近原则呢? 答案是:不影响。远的,永远是远的。不能给远的写一个important,干掉近的。 ! important做站的时候,不允许使用。因为会让css写的很乱。 现在,我们知道层叠性能比较很多东西: 选择器的写法权重,谁离的近,谁写在下面。

权重计算总结

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端儿

荷兰国旗问题

荷兰国旗有三横条块构成,自上到下的三条块颜色依次为红、白、蓝。现有若干由红、白、蓝三种颜色的条块序列,要将它们重新排列使所有相同颜色的条块在一起。本问题要求将所...

21610
来自专栏Jack的Android之旅

自定义天气显示温度变化的LinearChart控件

这次发表的是前几个月搞定的一个自定义控件,那时自己在写一个小的查看天气的软件,在这过程中就涉及了显示天气变化的折线图,一开始想用一些画图框架来解决问题,不过考虑...

28410
来自专栏Nian糕的私人厨房

CSS 布局_2 Flex弹性盒

弹性盒,是一种布局方式,当页面需要适应不同的屏幕大小以及设备类型时,它依然能确保元素拥有更恰当的排布行为,弹性盒属于 CSS 3 部分,IE9 以下不支持,现代...

12240
来自专栏偏前端工程师的驿站

CSS魔法堂:你真的懂text-align吗?

前言 也许提及text-align你会想起水平居中,但除了这个你对它还有多少了解呢?本篇打算和大家一起来跟text-align来一次负距离的交往,你准备好了吗?...

23070
来自专栏Coco的专栏

谈谈一些有趣的CSS题目(二)-- 从条纹边框的实现谈盒子模型

15620
来自专栏腾讯NEXT学位

我不知道你知不知道但前端NEXT知道的伪元素小技巧

36770
来自专栏Android知识点总结

D6-Android绘图之一言不合画个表

12940
来自专栏web前端教室

20170108_先行者周日群视频课程——文字版

各位同学们大家好,又到周日了。因为1月1号是新年放假,所以今天也可以算是2017年的第一个周日,不知各位都对2017年有什么安排,而2016年又有哪些收获。我只...

20960
来自专栏天天P图攻城狮

Android OpenGL开发实践 - 基于OpenGL ES 2.0的Android相机实时图片涂鸦实现思路

这篇文章将给大家讲解如何在Android系统上基于OpenGL ES 2.0来实现相机实时图片涂鸦效果,所涂内容跟随人脸出现、消失、移动、旋转及缩放,在这里,我...

1.5K130
来自专栏Coco的专栏

谈谈一些有趣的CSS题目(九)-- 巧妙的实现 CSS 斜线

36740

扫码关注云+社区

领取腾讯云代金券