强大而好用的选择器:focus-within

本文为叩丁狼高级讲师原创文章，转载请注明出处。

伪类和伪元素

在开发网页样式中，选择器必不可少，而且选择器也是在开发css中非常重要的内容，包括常用的类选择器，id选择，同时还有伪类，伪类选择器最大的特点就是冒号开头。平时也经常会有小伙伴问到，在使用的时候有伪类，也有伪元素，有些添加单冒号，有些添加双冒号，有没有什么区别？

在网上总结的比较多的一个特点就是，其实在使用的时候，无论是伪类还是伪元素都是可以用单冒号的。但是伪元素可以用双冒号，而伪类只能用单冒号。符合标准而言，单冒号(:)用于 CSS3 伪类，双冒号(::)用于 CSS3 伪元素。

:focus-within伪类

上面简单讲解一下伪元素选择器和伪类选择器，本文的主角是一个新的伪类选择器：:focus-within。

:focus-within选择器其实跟:focus是很相似的，但是也有很大的区别，:focus设置之后，是当前元素触发焦点状态后的样式。而:focus-within，通过名字可以猜到，它是当前元素或者后的元素获取焦点后的样式。

举个栗子：

<style>
	form{
		width: 500px;
		min-height: 300px;
		padding: 10px;
	}