css代码区分大小写吗（那些你不知道的css冷知识）-爱玩数码

css代码区分大小写吗（那些你不知道的css冷知识）

爱玩数码编辑 • 2023年1月9日 15:13:06 • 投稿 • 阅读 10

这些css冷知识虽然看似没有什么太大难度，但是你很多时候都不会这么使用！不妨来看看！或许可以学到一些新知识！

01 增加css优先级的小技巧

如果你想增加p标签的优先级，你会怎么做？

以前我是这么做的，增加嵌套。

// 方法1.father.p1{ color: red; } // 方法2div.p1{ color:red; }

但是这种方式都不是最好的办法，这些方法增加了耦合，降低了可维护性。

最好的办法是下面这种办法

// 方法1.p1.p1{ color:red; } // 方法2.p1[class]{ color:red; }

02 css选择器是否区分大小写

有些区分大小写，有些不区分大小写。例如区分大小写的有ID,类选择器class，属性选择器[attr=val]中的val，而attr不会影响；不区分大小写的有标签选择器

// 不区分div{…}[class]{…} [id]{…} []{…} === []{…} // 区分#root{…} .p{…} []{…} !== []{…}

如何摆脱属性值大小写的限制？你可以通过正则表达式来解决这个问题。如下

// 方法1[title ~=”val”i]{…} // 方法2[title *=”val”i]{…}

03 响应式 CSS 纵横比

创建具有精确宽度和高度的视频很容易，但要使视频随屏幕大小缩放，同时保持其纵横比则要困难得多。虽然HTML 中的video标签使得创建响应式视频变得异常容易。您需要做的就是将宽度设置为 100%，将高度设置为自动。

video{ height: auto; width:100%}

但是对于iframe却是失效的。如果我们尝试将宽度设置为 100% 并将高度设置为 auto 的上述技巧，我们将得到一个正确缩放其宽度的元素，但高度始终为 150 像素。这是因为 iframe 默认为 150 像素高并忽略嵌入视频的纵横比。

处理这种情况的最佳方法是将 iframe 包装在一个保持正确纵横比的容器中，然后用 iframe 填充该容器。如下代码：

<divstyle=”–aspect-ratio:2/3;”><iframesrc=”…”></iframe></div>//css.video-box{position:relative;padding-bottom:calc(var(–aspect-ratio,.5625)*100%);height:0;width:100%;}.video-boxiframe{position:absolute;top:0;left:0;width:100%;height:100%;}