栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

项目中列出的类的顺序会影响CSS吗?

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

项目中列出的类的顺序会影响CSS吗?

我不得不不同意乔恩和沃森的回答,因为…

是的, 可以 (取决于声明)

您的问题是:

CSS类在DOM元素上的排序是否会影响语句优先级?

哪个确实取决于所讨论的语句。

HTML排序通常不重要

当直接调用一个类(即或)或组合调用(即或)时,以下 是等效的

.class1``.class2``.class1.class2``.class2.class1

<div ></div><div ></div>

可以基于HTML顺序影响上述HTML的语句优先级的情况

在HTML中进行排序最重要的地方是在CSS中使用 属性 选择器。

示例1:使用以下代码尝试 属性值 匹配的
提琴手将不会对字体颜色进行任何更改,并且

div
由于类的顺序,每个字体都会具有不同的属性:

[] {    color: red;}[] {    background-color: yellow;}[] {    border: 1px solid blue;}

示例2使用以下代码尝试 属性值的 开头匹配的

在第二个中不会改变字体颜色

div
,并且
div
由于类的顺序,每个都将具有不同的属性:

[class^="class1"] {    color: red;}[class^="class1 class2"] {    background-color: yellow;}[class^="class2 class1"] {    border: 1px solid blue;}

示例3使用以下代码尝试 属性值的 末尾匹配的
不会对first的字体颜色进行任何更改

div
,并且
div
由于类的顺序,每个字体都会具有不同的属性:

[class$="class1"] {    color: red;}[class$="class1 class2"] {    background-color: yellow;}[class$="class2 class1"] {    border: 1px solid blue;}

关于“优先”的明确声明

需要明确的是,在上述情况下,就“陈述优先权”而言,真正受到影响的实际上是该陈述是否确实 适用
于该元素。但是,由于应用程序在某种意义上是基本优先级,并且由于上述情况是这种应用程序实际上是基于HTML Dom元素上的 顺序
(而不是该类的存在或不存在)的情况,我认为值得将此作为答案。

可能有效使用类订购?

根据BoltClock的评论,这是我想到的想法。考虑根据对不同样式至关重要的任何因素,仅考虑两个用于样式化元素的类。从理论上讲,这两个类可以使用属性选择器的组合来代替使用11个不同的单独类(实际上,如稍后所述,只有一个类,可能性几乎是无限的,但我将在稍后讨论帖子是关于多个类的排序)。对于这两个类,我们可以为元素设置不同的样式,如下所示:

假设这些HTML组合

<div >Element 1</div><div >Element 2</div><div >Element 3</div><div >Element 4</div>

CSS的可能性

.class1 {} .class2 {} [] {} [] {} .class1.class2 {} [] {} [] {} [class^="class1"] {} [class^="class2"] {} [class$="class1"] {} [class$="class2"] {} 

如果我计算正确,则3个类可以至少提供40个选择器选项组合。

为了阐明我对“无限”可能性的注释,如果逻辑正确,则单个类可能已嵌入通过

[attr*=value]
语法查找的代码组合。

这一切太复杂了吗?可能吧 这可能取决于确切实现方式的逻辑。我想带出的一点是,它是可能的CSS3有类排序是显著如果需要的话,并计划于它,它可能不是 _可怕的_错误要利用CSS的权力的方式。



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/416186.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号