:empty 空元素
:empty : css 伪类代表没有子元素的元素，子元素只可以是元素节点或者文本
<div class="empty1"></div>
.empty1:empty {
background: pink;
height: 80px;
width: 80px;
}
// 对比
<div class="empty1">有内容</div>
.empty1:empty {
background: pink;
height: 80px;
width: 80px;
}
利用场景：空元素的占位符
:valid :invalid 校验表单
pattern 检查控件值的正则表达式
:valid 表单验证通过的样式
:invalid 表单未通过验证的样式
:checked 美化选项框
默认的选项框和设计稿不符合，样式太丑，没有引用第三方 ui 库，直接手写。原理是把原有的选项框隐藏掉，文字用 span 包裹，设计稿需要的样式直接写在 label 标签上面。选中样式通过 input:checked + label
参考代码
<div>
<input type="radio" name="radioName" id="fed-engineer" >
<label for="fed-engineer"></label>
<span>前端工程师</span>
</div>
input:checked + label {
background-color: #f90;
}
label {
margin-right: 5px;
padding: 2px;
border: 1px solid #f90;
border-radius: 100%;
width: 18px;
height: 18px;
background-clip: content-box;
cursor: pointer;
transition: all 300ms;
&:hover {
border-color: #09f;
background-color: #09f;
box-shadow: 0 0 7px #09f;
}
}
::selection:改变选中文本选择颜色
::selection{
color:#37ca7c;
}
可设置的颜色种类不多，可参考文档
参考文章
灵活运用 CSS 开发技巧