欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

CSS三种机制及优先级问题_html/css_WEB-ITnose

程序员文章站 2022-05-29 16:06:11
...
为了解决冲突,CSS利用三种机制来达到目的:继承、层叠和特指。

1.继承

CSS中很多可以继承的属性都和文本有关系,比如说字体啊,颜色啊,字号这些,不能继承的也有一些,比如说盒子模型里面外边距(margin)、内边距(padding)、边框(border)等。

对于能够继承的属性,比如说字号大小,我们一般有两种方法来写单位,一种是用像素(px),另一种是用百分比(例如60%),在利用百分比的时候要注意下,因为这个百分比会影响到它的后代,也就是说后代又是前者的60%,那这个后代的字体就是36%了。

2.层叠

层叠是CSS的核心机制,也是一种可以方便实用的改变CSS样式的方法。这里面说的层叠就是样式表中的层叠,在文本样式中可以一层一层叠加上去,这样做有一个好处是可以让浏览器面对很多个属性的时候可以通过层层筛选达到最终想要的那个值。

既然层叠这么好用,我们来说一下它有什么规则吧。

a.首先是要对每个元素和属性的声明

b.然后按照顺序和权重排序

c.按特指度排序

d.顺序决定权重

现在再来说一下各个来源样式的优先顺序:作者行内样式>作者嵌入式样式>作者连接样式>用户样式>浏览器默认样式

当然了,作者就是设计这个东西的人(就是你),用户就是读者,看这个东西的人,如果说用户是特殊人士,需要放大字号或者改变颜色,可以强制浏览器加载成想要的样式。

3.特指

一个简单的计分原则是,0.0.0.0,1.0.0.0比0.11.0.0大,排在前面的1比后面的100都管用。

第一个0那里是检验是否是内联元素,如果是,则置1

第二位是id位,有几个就加几

第三位是class位,有几个类、伪类和属性就加几

第四位是Element位,有几个元素就加几

下面是几个栗子:

a {} 特指度为0.0.0.1

.a{} 特指度为0.0.1.0

#a{} 特指度为0.1.0.0

.a.b c{} 特指度为0.0.2.1

#a b.c{} 特指度为0.1.1.1

头一天开博客,有点鸡冻。先到这里吧,欢迎留言讨论 ^ 。^