css 伪元素和伪类
伪类
CSS的伪类以冒号:
作为前缀,被添加到一个选择器的末尾,用于样式在特定情况下才被呈现到指定的元素时才被添加。
:nth-child()
:nth-child(an+b)
:这个伪类找到所有当前元素的兄弟元素,按照位置顺序排序1…n,选择的结果为第(an+b)个元素。
a:nth-child(0n+2)
匹配第二个a标签。
a:nth-child(2n+1)
匹配1,3,5,7…2n+1位置上的标签,奇数标签,可以用a:nth-child(odd)
代替。
a:nth-child(2n)
匹配偶数位置上的标签,可以用a:nth-child(even)
代替。
:last-child
这个伪类表示最后一个元素,比如下面的10个<div class="sb">test</div>
1 | <div class="test"></div> |
那么最后一个div的背景色变为#eee。
:last-of-type
选择这个伪类的子元素列表中最后一个给定类型的子元素。
1 | <div class="test"> |
在test下面的所有子元素中最后一个p的背景色变为#eee
:active、:link、:hover、:visited
这个伪类匹配被用户激活的元素,当用鼠标交互时,它代表用户按下键和松开键之间的时间。通常用来匹配tab键交互。通常用于button和a标签。
这个样式会被后声明的其他链接相关样式(link、hover、visited)覆盖,为了实现正常效果使用LVHA顺序定义相关样式::link
–:visited
—:hover
—:active
。
:checked
表示处于选中状态下checkbox、radio、option元素。
比如下面的例子:
1 | :checked { |
:default
选择相关元素中默认的表单元素。
:focus
这个伪类表示获得焦点的元素。当用户点击或者使用触摸屏触摸时触发。主要用在input元素上,当用户点击输入框时修改input的样式。
- 本文链接:https://dowob.cn/2019/07/23/css-%E4%BC%AA%E5%85%83%E7%B4%A0%E5%92%8C%E4%BC%AA%E7%B1%BB/
- 版权声明:本站所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 CN 许可协议。转载请注明出处!