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

01 增加css优先级的小技巧

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

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

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

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

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

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

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

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

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

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

有些区分大小写，有些不区分大小写。例如区分大小写的有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]{...}

03 响应式 CSS 纵横比

创建具有精确宽度和高度的视频很容易，但要使视频随屏幕大小缩放，同时保持其纵横比则要困难得多。虽然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%;
}