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

01 增加css优先级的小技巧

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

<div class="father">    <p class="p1"></p>    <span class="s1"></span></div>

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

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

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

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

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

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

// 不区分div{...}   [class]{...}   [id]{...}   [title="val"]{...} === [Title="val"]{...}// 区分#root{...}        .p{...}        [title="val"]{...} !== [title="Val"]{...}

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

// 方法1[title ~="val" i]{...}// 方法2[title *="val" i]{...}

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

 video{  height: auto;   width:100% }

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

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

<div class="video-box" style="--aspect-ratio: 2 / 3;">     <iframe src="..."></iframe></div>// css.video-box{  position: relative;  padding-bottom: calc(var(--aspect-ratio, .5625) * 100%);  height: 0;  width: 100%;}.video-box iframe {  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;}