# 01. 网站平滑滚动
在元素上添加 scroll-behavior: smooth 可以启用全页面的平滑滚动。
html {
scroll-behavior: smooth;
}
# 02. 链接的属性选择器
这个选择器选择 href 属性以“https.”开头的链接。
a[href^="https"] {
color: blue;
}
# 03. 同级元素选择器
选择所有紧随 ## 之后的同级元素。
h2 ~ p {
color: blue;
}
# 04. :not() 伪类
这个选择器给不具有 “special” 类的列表项应用样式。
li:not(.special) {
font-style: italic;
}
# 05. 响应式文字的视口单位
使用视口单位(vw、vh、vmin、vmax)可以使文字大小响应视口尺寸。
h1 {
font-size: 5vw;
}
# 06. 空元素的 :empty 选择器
这个选择器选择空的元素并隐藏它们。
p:empty {
display: none;
}
# 07. 自定义属性(变量)
你可以定义和使用自定义属性来更容易地主题化和维护。
:root {
--main-color: #3498db;
}
h1 {
color: var(--main-color);
}
# 08. 图片控制的 object-fit 属性
object-fit 控制替换元素(如图片)的内容应该如何调整大小。
img {
width: 100px;
height: 100px;
object-fit: cover;
}
# 09. 简化布局的 Grid
CSS Grid 提供了一种强大的创建布局的方式。
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
# 10. :focus-within 伪类
:focus-within 选择器选择包含任何获得 :focus 的子元素的元素。
form:focus-within {
box-shadow: 0 0 5px rgba(0,0,0,.2);
}