定义CSS样式时,经常出现两个或更多规则应用在同一元素上
·选择器相同,则执行层叠性
·选择器不同,就会出现优先级的问题,就会涉及CSS权重计算。
下面我们详解介绍 CSS层叠性权重计算方法。
1) 权重计算公式
关于CSS权重,我们需要一套计算公式来去计算,这个就是 CSS Specificity(特殊性)
值从左到右,左面的最大,一级大于一级,数位之间没有进制,级别之间不可超越。
·关于CSS权重,我们需要一套计算公式来去计算,这个就是 CSS Specificity(特殊性)
2) 权重叠加
我们经常用交集选择器,后代选择器等,是有多个基础选择器组合而成,那么此时,就会出现权重叠加。
就是一个简单的加法计算
div ul li ------>0,0,0,3
.nav ul li ------>0,0,1,2
a:hover -----—>0,0,1,1
.nav a ------>0,0,1,1
注意:
数位之间没有进制 比如说: 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0, 所以不会存在10个div能赶上一个类选择器的情况。
3) 继承的权重是0
这个不难,但是忽略很容易绕晕。其实,我们修改样式,一定要看该标签有没有被选中。
1) 如果选中了,那么以上面的公式来计权重。谁大听谁的。
2) 如果没有选中,那么权重是0,因为继承的权重为0。
前端入门Web前端HTML5+CSS3+移动Web前端全套
这是优先级问题,如果前面已经用了 .dots span 来定义span的样式,那么后面如果只用 .actived 来给span叠加样式,在优先级上就会吃亏,会被css忽视。只有用 .dots span.actived 才能在优先级上与前面平起平坐甚至是碾压css对优先级的计算是建立在不同选择器的权重上面的(比如说ID选择器的权重就比类选择器高),多个选择器并存的情况下会把它们的权重值相加后再来比较优先级(所以 .dots span.actived 这是三个选择器并存,而 .actived 只有一个选择器,谁优先一目了然啦!)。这个我就不详细说了,自己查。
属性:通过属性的复杂叠加才能做出漂亮的网页。选择器:通过选择器找到对应的标签设置样式
标签选择器:就是用标签名来当选择器
1>所有的标签都能做选择器,例如:div、p、 ul、 li、 a、 span、body等等
2>不管这个标签藏的多深,都能够被选择上。
3>选择的整个界面所有的标签,而不是某个,是共性而不是特性
比如说火狐浏览器中的 li 里面所有的 a 标签去掉下划线
# 表示选择 id 选择器
1>任何标签都可以有 id ,命名方式要以字母开头,区分大小写
2>同一页面内 id 不可重复,即使是不一样的标签,也不允许相同的 id
. 表示类选择器 与 id 选择器类似,但是类选择器可以重复,比如说很多标签都有 aa 这个类
css里面用 . 来表示类
同一标签,可能同时属于多个类,用空格隔开.说明 div 同时属于 bb 和 cc 类
<div class = @"bb cc">我是bbcc</div>
错误方式:
<div class = @"bb" class="cc">我是bbcc</div>
思路:提供公共类,再根据相应的类名,去设置相应的样式。
在根据每个标签,去选取自己想要的类。