CSS新增选择器(主要伪类选择器)描述

a标签伪类选择器:

a:link{CSS样式;CSS样式} ————>修改从未被访问过的a标签样式。

a:visted{CSS样式;CSS样式} ————>修改已经被访问过的a标签样式。

a:hove{CSS样式;CSS样式} ————>修改鼠标悬浮的a标签样式。

a:active{CSS样式;CSS样式} ————>修改标签被长按的a标签样式。

Warning: 如果a标签的四个伪类选择器同时使用的话,那你一定要注意使用顺序,要不然可能没有效果。有个好记的短句子:LVHA,就是lv哈,lvha就对应着顺序,也对应着刚才我写顺序的首字母。
还有一个和a标签相关的伪类选择器:
a:target————>向点击超链接(a标签)跳转到某个元素时触发。一般都是有a标签参与。

表单元素伪类选择器:

标签名:focus{CSS样式;CSS样式} ————>输入框获得鼠标焦点时触发的样式。

标签名:checked{CSS样式;CSS样式} ————>表单元素被选中时触发。

标签名:disabled{CSS样式;CSS样式} ————>访问到所有不可用表单元素。

标签名:required{CSS样式;CSS样式} ————>访问到所有的必填表元素。

结构伪类选择器(重点)

nth-child
标签>标签下的子类标签:frist-child { CSS样式;CSS样式 }————>访问到标签下的第一个子类标签。
标签>标签下的子类标签:last-child { CSS样式;CSS样式 }————>访问到标签下的最后一个子类标签。
标签>标签下的子类标签:nth-child(number) { CSS样式;CSS样式 }————>访问到标签下的第number子类标签。
标签>标签下的子类标签:nth-child(odd) { CSS样式;CSS样式 }————>访问到标签下的所有奇数子类标签。
标签>标签下的子类标签:nth-child(even) { CSS样式;CSS样式 }————>访问到标签下的所有偶数子类标签。
标签>标签下的子类标签:nth-child(Xn+y) { CSS样式;CSS样式 }————>访问到标签下的根据公式对应的子类标签。X从0开始数。例如:3n+1找的就是第1,4,7,10,13…的子类标签。
还有很多例如访问标签下的同种类型的子类标签用:
标签>标签下的子类标签:first-of-type{ CSS样式;CSS样式 } (第一个同类型子标签的第一个)
访问同种类型的和之前的都一一对应。

这是最近抽时间做了一个简短的对于新CSS选择器的一个样式解释,也是我第一个算是入门的自我理解,一个小白需要学的东西太多了。

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值