最近在看 《CSS 选择器世界》
通过伪类能够做很多事情不用借助js
,比如列表搜索过滤效果,表单验证必选提醒,表单选中状态特殊的样式, 空列表的占位符。这些都不需要借助 js
,开心,坚信每少一行代码,就少一点 bug
的出现率。
这些都是在双十一凑单神器 《CSS 选择器世界》,上面看到了,推荐看。完之后对我而言 get 到了很多新技能,写代码可以写的更加简介了,维护性也很不错。不信你可以先看看我的这些东西,如果你和我说这个你都知道,经常用,原来是我的无知,
: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;
}
注意: 注释,空格都没法匹配
利用场景:
请求接口,但是没有数据返回,利用 :empty
可以少写 v-if
进行数据判断。
:not
匹配不符合一组选择器的元素
使用场景:
配合 :first-child
和 :last-child
可以简单实现首尾样式不一样
搜索过滤实例页面
没想到还能这么用吧,我也才发现,又可以少几行 css
代码了
: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;
}
}
利用 :checked
可以对一些选中的项做样式处理,不用 js
直接 css
实现
:default
默认状态
利用这个伪类可以帮我们记住默认状态,避免选择与默认混淆,当默认选项修改的时候,只要修改一处就好了,相对而言有利于项目维护
利用场景:
:required
伪类用来匹配设置了 required
属性的表单元素,表示这个表单元素必填或者必写,:optional
是他的对立面
:placeholder-shown
占位符显示伪类
当输入框的 placeholder
内容显示的时候,匹配该输入框,这个现在有兼容性
::selection
改变选中文本选择颜色
::selection{
color:#37ca7c;
}
可设置的颜色种类不多,可参考文档 参考文章 灵活运用 CSS 开发技巧
:indeterminate
复选框是全选还是半选状态
:valid :invalid
pattern
检查控件值的正则表达式
:valid
表单验证通过的样式
:invalid
表单未通过验证的样式
nth-child()
适用于内容动态无法确认的匹配场景
选择器优化
input[type="radio"] 简写 [type="radio"]
,因为 radio
类型的单选款一定是 input
标签
因为 id
选择器的优先级很高,一般不建议使用,因为后期维护成本很高
transition
属性对 display
没有过渡效果,但是对于 visibility
有过渡效果,有时候我们可以 transition
做一点动画,效果体验会更好,配合 :hover
不建议用 span div
模拟按钮 ui
效果,因为 button
原生支持表单提交,enter
,可以被键盘 focus
通过用 display
或者 visibility
隐藏的元素没办法通过键盘让隐藏的元素控件通过 :focus
聚焦,我们可以使用 opcity
做到