本文章为非原创文章,内容参考自伪类和伪元素,仅作学习参考使用
伪类和伪元素
为什么引入伪类和伪元素
css引入伪类和伪元素概念是为了格式化文档树以外的信息,即不在文档树中的部分。 比如,一个列表中的第一个元素,一句话的第一个字母。
伪类用于当已有元素处于某个状态时,为其添加对应的样式,这个状态是根据用户行为动态变化的。比如说,用户悬停在指定的元素时,我们可以用hover来描述该元素的状态,为其添加该状态下的样式。
伪元素可以为用户创建一些不在文档树中的元素,并为其添加样式。比如说,我们可以通过before来在一个元素之前添加一些文本。
伪类
伪类-结构
- :link 选择未访问的链接
- :visited 选择已访问的链接
- :hover 选择鼠标悬停的元素
- :active 选择活动的链接
- :focus 选择获取焦点的字段
伪类-结构化
- :not 一个否定伪类,用于匹配不符合参数选择器的元素
- :first-child 匹配元素的第一个子元素
- :last-child 匹配元素的最后一个子元素
- :first-of-type 表示一组兄弟元素中其类型的第一个元素
- :last-of-type 表示一组兄弟元素中其类型的最后一个元素
- :nth-child 根据元素的位置匹配一个或者多个元素,它接受一个an+b形式的参数
2n+1匹配位置为1,3,5,7...的元素 你可以用odd替换奇数行,even代替偶数行
复制代码
- :nth-last-child 与:nth-child相似,不同之处在于它从最后一个子元素开始计数
- :nth-of-type与nth-child相似,不同之处在于它是只匹配特定类型的元素
- :nth-last-type 与nth-of-type相似,不同之处在于它是从最后一个子元素开始计数 的。
- :only-child 当元素是其父元素中唯一的子元素时,:only-child匹配该元素
- :only-of-type 当元素是其父元素中唯一特定类型的子元素时,:only-child匹配该元素
- :target 当url带有瞄名称,指向文档内某个具体的元素时:target匹配该元素
伪类-表单元素
- :checked 匹配被选中的input元素,这个input元素包裹radio和checkbox.
- :default 匹配默认选中的元素
- :disabled 匹配禁用的表单元素
- :empty 匹配没有子元素的元素,如果元素中含有文本节点,html元素或者一个空格,则:empty不能匹配这个元素
- :enabled 匹配没有设置disabled属性的表单元素
- :in-range 匹配在指定区域内元素,
- :out-of-range 匹配不在指定区域内的元素
- :indetermimate 当某组中的单选框或复选框还没有选取状态时,:indeterminate匹配该组中所有的单选框或复选框
- :valid 匹配条件验证正确的表单元素
- :invalid 匹配提交验证错误的表单元素
- :optional :required匹配设置有无设置required属性的表单元素
- :read-only 匹配设置了只读属性的元素
- :read-write匹配处于编辑状态的元素
伪类-其他相关
- :root 匹配文档的跟元素
- :fullscreen 匹配处于全屏模式下的元素
伪元素
伪元素有时候使用双冒号为不是一个冒号,css3为了区分伪类和伪元素,要求使用双冒号表示伪元素,大多数浏览器都支持这两个值。
- :before 在被选择元素之前插入内容,需要content属性指定要插入的内容。被插入的内容实际上不存在文档树中。
- :after 与before,在被选择元素之后插入内容
- :first-letter 匹配元素中文本的首字母
- :first-line 匹配元素中第一行的文本,只能用在块元素中,不能用于内联元素中
- ::selection 匹配被用户选择或者处于高亮的部分,该元素支支持双冒号的形式
- ::placeholder 匹配占位符的文本,只有元素设置placeholder属性时改为元素才生效。