CSS伪选择器(CSS中:和::)

一个冒号是伪类,两个冒号是伪元素

伪类可以独立于文档的元素来分配样式,且可以分配给任何元素,逻辑上和功能上类类似,但是其是预定义的、不存在于文档树中且表达方式也不同,所以叫伪类。
伪元素所控制的内容和一个元素控制的内容一样,但是伪元素不存在于文档树中,不是真正的元素,所以叫伪元素。

伪类有::first-child ,:link:,:vistited,:hover:,:active,:focus,:lang
伪元素有::first-line,:first-letter,:before,:after 

伪类

伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性。由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又会失去这个样式。

1、:lang() | 选择指定语言的元素

p:lang(fr)

p[lang|="fr"]

伪元素

与伪类针对特殊状态的元素不同的是,伪元素是对元素中的特定内容进行操作,它所操作的层次比伪类更深了一层,也因此它的动态性比伪类要低得多。

:first-line,:first-letter,:before,:after 

常用伪选择器

1、::first-line | 选择首行文本

2、::first-letter | 选择首字母

3、::selection | 选择高亮(被选中)的区域

4、:root | 根元素

5、:empty | 仅当元素为空时触发

6、:only-child | 选择仅有的子元素

7、:first-of-type | 选择第一个指定类型的子元素

 

8、:last-of-type | 选择最后一个指定类型的子元素

9、:nth-of-type() | 选择特定类型的子元素

10、:nth-last-of-type() | 选择列表末尾中指定类型的子元素

 

11、:link | 选择一个未访问过的超链接

12、:checked | 选择一个选中的复选框

13、:valid | 选择一个通过验证的元素

14、:invalid | 选择一个未通过验证的元素

15、:lang() | 选择指定语言的元素

16、:not() | 对于选择取反(这是一个运算符)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值