这是我参与「第四届青训营 」笔记创作活动的第13天
今天稍微看了一下mdn里面关于伪类和伪元素的一些文档
伪元素和伪类是css中的。关于伪元素，之前的我曾经想过用js操控伪元素，但是事实证明不行，除非直接修改css文件。
区分伪元素和伪类，这两个词有点容易混淆，但是注意一点，就是伪元素有一个元素，代表是dom，
其核心是创建而你能够迅速想到::before和::after就是生成一个元素
你可以对元素进行操控，设置内容，设置属性，颜色
介绍
伪元素以类似方式表现，就像元素一样，使用：：
伪元素可以实现一些东西，比如说不会影响js操作，可以动态的实现一些功能，在mdn中举了一个例子，我觉的很典型
大意就是在一段几行长的p标签内，想让第一行加粗，但是你并不知道第一行怎样选择，这就可以使用伪元素：：first-line来操作
- 不是所有的标签都支持伪类，如果img,iframe,input这几个标签，这是因为要标签支持伪类，需要保证该标签能够插入内容，像上面的几个标签因为无法插入内容，所以不支持伪类
- 伪元素会影响文档流（在不加上float或者position的情况下），它就是相当于js插进去
选择器
伪元素使用::来进行学习
- after
和before一样经典，是一个经常使用的伪元素，
经常使用content
如果使用它来添加样式不一样的元素会自动排在父元素的后面
虽然好用，但是可惜就两个
- before
- first-letter
匹配首字母
- first-line
匹配首行
- selection
匹配文档被选中的那部分，这个有用，因为我觉得选中的时候高亮很丑好吧。
伪类
- active
用户激活的元素，代表用户按下按键和松开按键之间的时间。一般用在a标签和button标签
- blank
匹配输入值为空的input元素
- checked
匹配处于选中装填的元素或者复态框
- current
正在展示的元素或者它的上级元素（未翻译）
- deafult
匹配一组相似的元素中默认的
- disabled
匹配被禁用的元素，想起button的禁用按钮
- empty
匹配没有子元素的元素
- enabled
匹配任何被启用的元素。启用是跟disabled反过来的，也就是可以选择，点击，接受文本输入，获取焦点
- first-child
在开始写这段笔记时，我已经有一些记忆错乱了，first-child不是真的关于子元素，它是兄弟元素的匹配。
在一篇胡扯的博客上，认为first-child就是选择子元素，这是错误的，事实上在每一个嵌套的结构中该伪类都会尝试去匹配，除非已经提前匹配
这里扯到一些元素选择器和非元素选择器，元素选择器如p:first-child匹配的同列表元素的第一个标签为p的元素
注意只能为p，而且还得是第一个
非元素选择器其实就是class选择器和id选择器，非元素选择器需要更多的条件，它需要第一个标签的类名相等
- first-of-type
表示第一个匹配到的元素，这个伪类不会想first-child一样位置固定，它会在同级别依次去找，直到找到第一个
- last-child
- last-of-type
该伪类就是把第一个编程第二个
- nth-child
表示选择位置为第几个的元素，注意选择的数字不像
- nth-last-child
- nth-last-of-type
- focus
表示获得焦点时，即点击，用tab键转化到输入框也算
注意仅限于焦点元素，就是类似于a,button这些可点击的标签
- focus-visible
不懂，告辞
- focus-within
这个跟上者的区别在于嵌套方面上，使用focus-visible可以包含焦点元素，mdn文档上用于当input标签获得焦点的时候，其整个表单元素都会高亮
- future
匹配当前元素后面的元素
- hover
经常使用，注意获得焦点和鼠标经过是不同的两个概念，我刚开始的时候混在一起了
经典中的经典，注意在使用less和scss时需要嵌套使用的时候，要一步一步去链接，不要跳步
- indeterminate
匹配状态不明显的表单元素
- in-range
匹配input为选择数字的表单元素，就是type为number的input元素，当选择的数值没有超过该范围（就是要提前设置max和min）
垃圾
- out-range
看上面，该伪类表示数值超过范围
- invlid
匹配内容未通过的p元素
- lang
匹配文字，废物
- link
匹配未曾访问的链接
- local-link
匹配指向和当前文档同一网站页面的链接。
- not（）
表示匹配与选择器不一样的元素，也叫反选择器，注意填入的是可以是伪类
- only-child
匹配没有兄弟元素，只有自己的元素
- only-of-type
匹配兄弟元素中类型仅有的元素
- optional
匹配不是必选的表单元素
- past
匹配该元素之前的元素，
- placeholder-shown
匹配有placeholder的元素
- p;aying
- paused
- read-onlu
- read-write
- required
- right
- root
- scope
- valid
- target
匹配当前链接目标的伪类，其实就只有零点几秒，当页面在跳转的时候会匹配到
- visited
匹配已经跳转过的元素，这个适用于链接是blank属性的也就是创建一个新的页面
- left
垃圾
- first
打印文档的第一页，应该没用
