伪类选择器
一、什么是伪类选择器
伪类选择器是CSS中一种用于选择特定状态或位置的选择器。它们允许你为元素的特定状态或位置应用样式，而不是基于元素的名称、类名或ID等常规选择器
二、伪类选择器的使用
下面的选择器就是一个伪类选择器，它的含义是选择div的子代p元素，并且这个p元素还是div的第一个儿子
div>p:first-child{
}
同样的，这里的选择器选中的就是最后一个p元素孩子
div>p:last-child{
}
伪类选择器有一个很明显的标志，就是:
三、常见的伪类选择器
:hover当鼠标悬浮在元素上，并且能够选中，应用样式:active：当元素被激活（例如，鼠标点击按钮）时应用样式。:focus：当元素获得焦点（例如，通过键盘或鼠标）时应用样式。:visited：选择已被访问过的链接。:first-child：选择元素的第一个子元素。:last-child：选择元素的最后一个子元素。:nth-child(n)：选择元素的第n个子元素。:not(selector)：选择不匹配指定选择器的元素。:nth-of-type(n)：选择特定类型的元素中的第n个。:checked：选择已被选中的表单元素，如复选框或单选按钮。
四、tips
伪元素选择器
一、什么是伪元素选择器
伪元素选择器是CSS中一种用于在元素的特定部分插入内容或样式的选择器。与伪类选择器不同，伪元素选择器允许你在元素的内容之前或之后、某个特定位置或者插入元素的首字母等位置插入样式或内容。
二、伪元素选择器的使用
下面的选择器就是对伪元素选择器的一个简单的应用，这个选择器选中的是div标签的在网页上的第一行字符
div::first-line{
}
下面的选择器就是在p元素最前面加上一些内容，内容为00
p::after{
content:"00"
}
还有在选中的元素之后加内容的，
p::before{
content:"$"
}
对应的伪元素也有一个比较鲜明的特点，那就是他们都有::
三、常见的伪元素选择器
::before：在元素内容的前面插入新内容。::after：在元素内容的后面插入新内容。::first-letter：选中元素内容的第一个字母。::first-line：选中元素内容的第一行。::selection：选中用户通过鼠标或键盘选择的文本。
兄弟选择器
一、兄弟选择器的特点
在选择器的书写上，兄弟选择器也有自己的特定的符号，那就是+ ~，那么这两种符号各自的特点是什么呢
？+:相邻兄弟选择器，这个符号代表的是紧紧相邻的下一个兄弟元素，~：通用兄弟选择器，选中所有的符合条件的兄弟元素。注意： 不管是相邻兄弟选择器+还是通用兄弟选择器~，他们都有一个共同的特点，那就是他们都只会往下看，就算上面的兄弟满足选中的条件，也不会被当前选择器选中。
二、兄弟选择器的使用
当前选择器会先找到h1元素，然后往下看，下一个元素必须为p元素，如果是，则选中这个p元素
h1+p{
color:aqua;
}
当前选择器会先找到h1元素，然后往下看，选中下面的所有的p元素
h1~p{
color:aqua;
}
属性选择器
一、什么属性选择器
顾名思义，这个选择器就是根据元素的属性值来选中元素的选择器，那么我们应该怎么书写呢
二、属性选择器的使用
这个选择器选中的元素具有以下一些特点，这个元素具有type属性，并且属性值为submit
[type="submit"]{
color:#aaa;
}
这个选择器选中元素需要具有type属性，并且type的属性值需要以s开头，如果对正则表达式熟悉的同学，可以直观的看到这里的^其实是和正则中的规则是一致的
[type^="s"]{
color:#aaa;
}
三、tips
因为网页元素允许我们使用自定义属性，所以我们可以在元素上加上我们的自定义元素，然后再去写选择器，这样的话，能够大大提高我们使用属性选择器的灵活性
