css权重与常见布局（1）

CoderStudy 发布于2019-08-30 11:03 / 1786人阅读

摘要：实战例题某厂前端工程师笔试题基于以下的结构和样式，文本的颜色是计算权重权重最大因为所以文本显示的这种颜色

CSS的选择器类型与权重值

通配符选择器权重值为 0

元素选择器，和伪元素(例如::before) 权重值为 1

类选择器(class)，属性选择器，伪类(:hover) 权重值为 10

ID选择器权重值为 100

行内样式权重值为 1000

！important 权重值比前5个都大，可以说无穷大

tips:

！important的权重最大，但是它可以被权重更大的！important所覆盖

行内样式 总会覆盖外部样式表的任何样式(除了!important)

几种权重值不同的选择器作用在同一个元素上，以权重值大的css样式规则生效

几种权重值相同的选择器作用在同一个元素上，以后面出现的选择器的css样式规则生效

无论使用多少个权重低的选择器够比不过一个权重值高的选择

如果有!important那么相加的那些无论多权重高就不管用，如果有max-height/max-width那么!important不管用，如果同时有min-height/min-width和 max-height/max-width，那么max-height/max-width的不管用

口诀：从0开始，一个行内样式+1000，一个id+100，一个属性选择器/class或者伪类+10，一个元素名，或者伪元素+1

min-height/min-width > max-height/max-width > !important > 行内样式 > ID选择器 > 类选择器、属性选择器、伪元素和伪类选择器 > 元素选择器 > 通用选择器

权重的计算方法

div p h3 ---> 0,0,0,3 所以此时h3标签的权重值为3，因为div,p,h3这些都是标签选择器（权重值为1）


    
        
xxxx

#par .sub h3 ---> 0,1,1,1 此时的h3标签的权重值为111=100+10+1 (依次类推)


     
        
xxxx

要注意的一点就是如前面说到的那样，数位没有进位： 0,0,0,5 + 0,0,0,5 = 0,0,0,10而不是0,0,1,0，所以不会存在10个div能赶上一个类选择器的情况。

实战例题(某厂前端工程师笔试题)

基于以下的HTML结构和CSS样式，文本Dijkstra的颜色是？


    Martin Fowler
    Dijkstra
 

ul #related span {
    color:red;
}
#favorite .highlight{
     color:orange;
}
.highlight{
    color:black;
}

计算权重：
（1）ul #related span ---> 0,0,0,1 + 0,1,0,0 + 0,0,0,1 =0,1,0,2 ---> 102 red
(2) #favorite .highlight ---> 0,1,0,0 + 0,0,1,0 = 0,1,1,0 ---> 110 orange (权重最大)
(3) .highlight ---> 0,0,1,0 = 10 black

因为110 > 102 > 10 所以文本Dijkstra显示的 Orange这种颜色

混合云专线服务 css布局 css布局教程学习css布局 css与html

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114741.html

CSS

摘要：在元素之后添加内容控制表单控件的禁用状态。生成相对定位的元素，相对于其正常位置进行定位。双冒号是在当前规范中引入的，用于区分伪类和伪元素。 1.介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？有两种， IE 盒子模型、W3C 盒子模型；盒模型：内容(content)、填充(padding)、边界(margin)、边框(border)；区别： IE的cont...

Lyux 2019-08-29 16:16 评论0 收藏0
容易忽略的七个CSS知识点

摘要：样式声明通过一个称为级联的过程来解释和决定。级联级联可能是中最容易被弄错的属性之一。因此很容易认为元素的视觉边界等于其宽度，但情况并非如此。如果你在日常工作中使用CSS，那么你的主要目标很可能集中在使事情看起来是正确的。最终得到的正确结果远比如何实现更重要。这意味着相比正确的语法和视觉效果我们更少关注CSS的实现原理。你可能还没有意识到，但CSS的视觉效果通常是操纵隐藏属性的间接结...

chanthuang 2019-08-02 16:16 评论0 收藏0
容易忽略的七个CSS知识点

摘要：样式声明通过一个称为级联的过程来解释和决定。级联级联可能是中最容易被弄错的属性之一。因此很容易认为元素的视觉边界等于其宽度，但情况并非如此。如果你在日常工作中使用CSS，那么你的主要目标很可能集中在使事情看起来是正确的。最终得到的正确结果远比如何实现更重要。这意味着相比正确的语法和视觉效果我们更少关注CSS的实现原理。你可能还没有意识到，但CSS的视觉效果通常是操纵隐藏属性的间接结...

elina 2019-08-29 18:47 评论0 收藏0
CSS常见问题小结

摘要：常见问题小结一行内样式内联样式外部样式行内样式代码写在具体网页中的一个元素内比如一般不需要担心样式优先级与样式覆盖在制作页面的时候需要为很多的标签设置属性，所以会导致页面不够纯净，文件体积过大不利于，后期维护成本高。 CSS常见问题小结一、行内样式、内联样式、外部样式行内样式：代码写在具体网页中的一个元素内；比如：一般不需要担心样式优先级与样式覆盖在制作页面的时...

ivyzhang 2019-08-30 10:48 评论0 收藏0
CSS学习笔记(十六) CSS最佳实践之可维护性篇

摘要：国内各大公司都已经投入使用，在一些常见的网站，如淘宝腾讯小米等移动站点，随处可见其踪影。变革之腾讯手机淘宝的设计与实现前端乱炖适配总结样式重置上文已提及，这里推荐阅读同学写的专题文章。前言 CSS代码难维护众所皆知。为一个元素设置样式的方式可以通过定义的class、定义的id、元素的标签名、元素的属性等选择器以及这些选择器的组合来实现；作用于某个元素上的样式又可能来自单个样式规...

newtrek 2019-08-28 18:21 评论0 收藏0