你不知道的哪些伪类用法

2019/11/04 css

最近在看 《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 内容显示的时候,匹配该输入框,这个现在有兼容性

参考 demo

::selection

改变选中文本选择颜色

::selection{
		color:#37ca7c;
	}

可设置的颜色种类不多,可参考文档 参考文章 灵活运用 CSS 开发技巧

:indeterminate

复选框是全选还是半选状态

参考 demo

: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 做到

截图代码链接


一名伪程序猿——sunseekers,曾被bug虐的体无完肤,却依旧待他如初恋。

如果我改过的某一个bug,吐槽过的某一个需求,写过的某一行代码

曾在你的心里荡起涟漪,那至少说明在逝去的岁月里,我们在某一刻,共同经历着一样的情愫。

有时候,虽然素未谋面。却已相识很久,很微妙也很知足。


如果你喜欢我写过的某一个文字,请支持我,鼓励我,你的鼓励是我最大的动力来源

当然恰好你也喜欢我的话,我们可以互相关注,相互学习的哟!

sunseekers

Search

    Table of Contents