前端基础：CSS伪类的作用和基本使用

前端基础：CSS中伪类的作用和基本使用

作为一名优秀的前端开发，不会使用伪类和伪元素有点说不过去。

但是很多小白可能伪类和伪元素都分不清楚，我先同通俗的话解释下：伪类是用来给指定选择器添加状态效果，伪元素是给指定元素添加内容修饰。

今天先带大家看一下伪类是如何使用的，明天给大家演示下伪元素的使用。

常见的伪类诸如:active/:focus/:hover/:visited/:first-child等大家可能比较熟悉，用的比较频繁，实际上伪类有几十个，下面分门别类的展示一下

一、用于链接，按钮等元素的常见伪类

// :active 常见于用户点击按钮和松开按钮之间的样式
​
// :visited 常用于链接被访问之后的样式
​
// :link 一个链接未被点击时的样式

二、用于可获取焦点的元素的常见伪类

// :focus 可输入内容的标签选中时的元素样式
// :focus-within 当他的后代出现光标时触发该样式

三、用于打印时的常见伪类

// :first 打印文档的时候，第一页的样式。用于@page
// :left 用于打印时的左侧样式 
// :right 用于打印文档的所有右页

四、用于指定元素的常见伪类

// :first-child 表示在一组兄弟元素中的第一个元素。
// :first-of-type 表示一组兄弟元素中其类型的第一个元素
// :last-child 代表父元素的最后一个子元素。
// :last-of-type 表示了在（它父元素的）子元素列表中，最后一个给定类型的元素
// :not() 用来匹配不符合一组选择器的元素。
// :nth-child() 匹配到的元素集合（n=0，1，2，3...）
// :nth-last-child() 这个CSS 伪类 从兄弟节点中从后往前匹配处于某些位置的元素
// :nth-last-of-type() 从结尾处反序计数
// :nth-of-type 针对具有一组兄弟节点的标签, 用 n 来筛选出在一组兄弟节点的位置
// :only-child 匹配没有任何兄弟元素的元素
// :only-of-type 匹配没有其他相同类型的兄弟元素
​

五、与鼠标相关的伪类

// :hover  鼠标悬浮在某个元素上时的样式

六、其他伪类

// :checked 表示处于选中状态是的radio、chexkbox等元素的状态
// :default 表示处于默认值时的元素状态，常见于radio option等
// :dedined 用于定义好的元素上。常见于自定义元素标签
// :empty 当元素没有子元素时采用此样式
// :enadled 用于能被激活或者能获取焦点的元素
// :host 用于shadowDOM 不常见
// :indeterminate 用于状态不确定的元素，比如正在编辑中的input或者正在改变中的progress元素
// :in-range 用于input标签的内容在限定的min和max中的样式
// :out-of-range 用于input标签的内容超出min和max时的样式
// :lang() 根据语言确定一些符号
// :optional 用于没有表示必填的一些元素属性
// :read-only 表示元素不可被用户编辑的状态
// :read-white 代表可被用户编辑的元素的样式
// :root 相当于 html不过比html标签选择器权重更高
// :target 常用于点击跳转套页面指定id元素时的样式
// :valid 内容符合要求时的元素样式
​

本来想再写一些例子的，但是有点晚了先睡觉啦有看的再更新。