css 选择器

2019/11/04 css

: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 开发技巧


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

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

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

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


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

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

sunseekers

Search

    Table of Contents