发布时间:2020-04-15 18:55:00
CSS选择器是构建CSS的基础。在为大型、复杂的嵌套(x)HTML文档定义样式时,很可能会遇到在不同结构下重复定义相同元素的问题,这也是前端开发人员头疼的问题
CSS选择器是构建CSS的基础。在为大型、复杂的嵌套(x)HTML文档定义样式时,很可能会遇到在不同结构下重复定义相同元素的问题,这也是前端开发人员头疼的问题
在这种情况下(对于不同结构下同一个元素的重复定义),当浏览器呈现页面文件时,会根据一定的规则排列优先级,然后根据优先级权重对元素进行处理
让我们看一个简单的HTML代码:
id=“content”class=“box”class=“italic”用于测试2
这是非常简单的HTML代码,但它很有代表性。我们可以找出它为什么有代表性
让我们猜猜结果中的“fortesting2”是什么颜色?好吧,这不是浪费你的眼睛。结果是橙色的。奇怪吗?有什么疑问吗?你注意到我在CSS中添加的注释中的数字了吗?这是什么?这是CSS选择器特性的权重值
ID选择器、类选择器、HTML标记选择器,这三个选择器是CSS继承的组件。浏览器在呈现它们时具有优先权。这种优先权可以在某些情况下计算
例如,我提供了一组CSS来定义上述HTML:
.boxp{颜色:绿色;}
在这里,前三个权重值都是11,后四个声明的权重值都是111,那么我们应该如何判断呢?
首先,让我们看看在这个声明中后定义了哪个元素。前三个是定义
.boxp{颜色:绿色;}
可以发现,第1条和第3条的权重值是相同的。让我们试着交换他们的立场。上帝,他们可以互相掩护。是的,这证明它们是真正的级别声明