前言
CSS选择器前端开发必备的工具，通过学习一些选择器的技巧能够让我们编写代码更简洁，更具有可维护性，减少对JS的依赖，灵活解决特定渲染需求；
正文
目前CSS提供了id，class，标签，后代，子代，兄弟，属性，伪类，伪结构，伪元素等选择器，下面让我介绍一些鲜为人知，但是具有一定使用场景的选择器；
伪类选择器
active：用户鼠标点击且未弹起时元素的样式；
empty：没有子元素的元素的样式；
has()：含有特定子元素的元素的样式；
:root：根元素，即html元素；
div:active{
}
div:hover{
}
div:empty{
}
div:has(span){
}
:root{
}
表单元素特有的
diabled：元素被禁用时的样式；
enabled：元素启用时的样式；
focus：元素获得光标时的样式；
checked：元素被选中时的样式；
valid：表单元素输入有效值时的样式；
invalid：表单上元素输入无效值时的样式；
button:disable{
}
button:enabled{
}
input:focus{
}
input:checked{
}
input:valid{
}
input:invalid{
}
结构伪类选择器
first-child：元素的第一个子元素；
last-child：元素的最后一个子元素；
nth-child(n)：所有类型子元素进行排序，选中第n个元素（n从0递增到无穷大）；
nth-of-type(n)：同类型子元素进行排序，选中第n个元素；
ul li:first-child{}
ul li:last-child{}
ul li:nth-child(1){}//所有类型子元素进行排序，选择出第一个为li的元素，如果第4个不为li则该选择器不生效
ul :nth-child(1){}//所有类型子元素进行排序，选择第一个元素
ul li:nth-of-type(1){}//同类型子元素进行排序，选择出第一个li
属性选择器
根据元素具有的属性和属性值来选择元素；元素上常见的属性有class，id，type，placeholder等
[type]{}//选择含有type属性的元素
input[type='text']{}//在表单选择器下包含type属性为text的元素
[class^=a]{}//选择含有class属性，且class属性值以a开头的元素
[class$=b]{}//选择class属性值以b结尾的元素
[class*=c]{}//选择class属性值含有c的元素
[type][disable]{}//选择含有type和disable属性的元素
伪元素选择器
before和after：在元素内容的前面或后面插入生成的内容；插入的内容不会出现在DOM树中，而是通过CSS渲染层插入虚拟内容，不能用JS交互；
其中img，input，select不支持伪元素选择器；
div::before{
content:'';
}
div::after{
content:url("");
}
placeholder：输入框占位符，可以更改输入框占位符的字体
input::placeholder {
color: #970303;
}
first-letter：元素（包括嵌套的子元素）的第一个字符或字母，只能用于块级元素；
div::first-letter{
font-size: 30px;
}
selection：自定义该元素（包括子元素）内文本被鼠标选中的效果；不能修改字体相关内容；
div::selection{
background-color: black;
color:aqua;
text-shadow: 1px 1px 2px white;
}
完结，有错误欢迎纠正！！！
