前端学习记录8-CSS- 特性,权重问题

CSS三种特性层叠性(选择器相同)继承性优先级权重划分(优先级特性)特别需要注意的问题 权重计算方式(权重叠加)特别需要注意的问题

CSS三种特性

层叠性(选择器相同)

多种CSS样式叠加 当浏览器解析时发现同一个选择器出现了相同的样式 浏览器会本着就近原则来 解决冲突 谁跟结构近就用谁 简单的来说就是谁后写的用谁 当没有冲突的样式时 不冲突的样式依然会继续执行

div{ color: red; font-size: 50px; } div{ color: blue; } <div>层叠性</div>

此时层叠性三个字会显示为蓝色

继承性

div{ color: blue; } <div> <p>继承性</p> </div>

此处未给P标签指定颜色 但继承性三个字的颜色依然是蓝色的

子标签会继承父标签的某些样式 如文本颜色和字号 假设要像设置继承属性 写在父元素中就可以了

恰当使用继承 可简化代码 降低复杂度 例如很多子元素需要某个样式 可以给父元素设定这个样式 在子元素中就可以继承 子元素可继承(text-,font-,line-,系列的样式 以及color 样式)

优先级

若选择器相同 则优先执行 层叠性 若选择器不同则会按优先级执行

权重划分(优先级特性)

选择器权重值级别*(通配符选择器) 继承性属性的选择器0,0,0,0百姓标签选择器0,0,0,1村长类,伪类选择器0,0,1,0县长id选择器0,1,0,0区长行内样式表(style写在标签里)1,0,0,0市长!important无穷国家主席

特别需要注意的问题

1.继承性属性的选择器

.nav{ color: red; } p{ color: green; } 错误示范 此时的CSS代码 p标签并不继承.nav中的任何属性 此时的P标签 并没有继承类名为.nav的div标签中的任何属性 在浏览器解析css样式时，类名为.nav现在的div标签 并不是p标签的父元素 p标签没有被任何人选中 除了他自己 <div class="nav"> <p>继承性</p> </div>

此时标签P中的文字 继承性三个字 显示颜色为green

.nav p{ color: red; } p{ color: green; } 此时p标签会继承 .nav p 中的属性 因.nav p 的权重 大于 p的权重

此时标签P中的文字 继承性三个字 显示颜色为red

2.链接伪类选择器

a:hover{ color:red; } 链接伪类选择器的权重值实际为 0,0,1,1 因为此选择器是复合选择器 既包括伪类选择器 也有a标签选择器 所以计算权重需要加上标签选择器的权重

权重计算方式(权重叠加)

简单计算例子选择器权重值.nav a0,0,1,1div ul li0,0,0,3.nav ul li0,0,1,2a:hover0,0,1,1

权重叠加方式为 对位加法 例如 0,0,0,5 + 0,0,0,5 = 0,0,0,10

不同位数的值不管多大没有任何可比性 例如 0,0,1,0 > 0,0,0,100

权重相同时采用 层叠性 展示样式

特别需要注意的问题

包含继承性的权重算法 .nav a{ color:#111; } .first{ color:#222; } <div class="nav"> <a href="" class="first"></a> <a href=""></a> <a href=""></a> <a href=""></a> </div> 通过代码观察 此时类名为.first的链接标签 已经被.nav a 这个样式选中了 通过权重计算 我们发现.nav a的权重为 0,0,1,1 而.first权重为 0,0,1,0 所以浏览器解析后 类名为.first链接颜色显示为 #111而不是#222