属性选择器的一些特殊用法
| 选择器 | 举例 | 描述 | ||
|---|---|---|---|---|
| [attr] | li[class] | 带有class的li | ||
| [attr=value] | li[class="a"] | class="a"的li,是全等 | ||
| [attr~=value] | li[class~="a"] | class中含有a | ||
| [attr | =value] | "li[class | ="item"]" | 匹配class="item-xxx"的li |
| [attr^=value] | li[class^="a"] | class中以a开头,匹配class="abc",class="ab", | ||
| [attr$=value] | li[class$="a"] | class中以a结尾 | ||
| [attr*=value] | li[class*="a"] | class中任何地方至少出现一次a | ||
注意：上表中的a表示一个整体 |
详情参考—— 属性选择器 - 学习 Web 开发 | MDN (mozilla.org)
:first-child和带有空格的 :first-child区别
元素后面直接跟:first-child表示这类元素的第一个
元素后空一格跟:first-child表示这类元素的第一个子元素
示例代码如下：
<div>
第1个div
<div>第一个div中的第1个元素</div>
<div>第一个div中的第2个元素</div>
<div>第一个div中的第3个元素</div>
</div>
<div>
第2个div
<div>第二个div中的第1个元素</div>
<div>第二个div中的第2个元素</div>
<div>第二个div中的第3个元素</div>
</div>
<style>
div:first-child{
color: aqua;
}
div :first-child{
color: red;
}
</style>
代码运行结果如下图：
我们可以在浏览器里看到div:first-child选中了第一个大的div，而里面的每一个子元素继承了父类的color
而div :first-child （带有空格的）选中的是div中的第一个子元素，如上面图中的红色字体部分
处理不同方向的文本
object-fit
object-fit CSS 属性指定可替换元素（例如：）的内容应该如何适应到其使用高度和宽度确定的框。
| 取值 | 描述 |
|---|---|
| object-fit:contain | 保留长宽比缩放 |
| object-fit:cover | 保存宽高填充，内容溢出部分会被裁剪 |
| object-fit:fill | 填充，宽高不匹配会拉伸图像 |
| object-fit:none | 保留原有尺寸 |
| object-fit:scale-down | 从contain和none中选一个尺寸小的 |
