CSS3新增的选择器有哪些?

CSS3新增的选择器有哪些?(逆站班学习论述)

css3选择器

在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素。

1.  p~ul
	选择前面有"< p >"元素的每个"< ul >"元素。

在这里插入图片描述

2. a[href^="https"]
	选择其 href 属性值以 "https" 开头的每个 < a > 元素。

在这里插入图片描述

3. a[href$=".pdf"]
	选择其 href 属性以 ".pdf" 结尾的所有 < a > 元素。

在这里插入图片描述

4. a[href*="abc"]
	选择其 href 属性中包含 "abc" 子串的每个 < a > 元素。

在这里插入图片描述

5. p:first-of-type
	选择属于其父元素的首个 < p > 元素的每个 < p > 元素。

在这里插入图片描述

6. p:last-of-type
	同上,选择属于其父元素的最后一个<p>元素的每个<p>元素。
7. p:only-of-type
	选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

在这里插入图片描述

8. p:nth-child(2)
	选择属于其父元素的第二个子元素的每个 < p > 元素。
9. p:nth-last-child(2)
	 同上,从最后一个子元素开始计数。
10. p:only-child
	选择属于其父元素的唯一子元素的每个 < p > 元素。
11. p:nth-of-type(2)
	选择属于其父元素第二个 < p > 元素的每个 < p > 元素。
12. p:nth-last-of-type(2)
	同上,但是从最后一个子元素开始计数。
13. p:first-child
	选择属于其父元素第一个子元素每个 < p > 元素。
14. p:last-chili
	选择属于其父元素最后一个子元素每个 <p> 元素。
15. :root
		选择文档的根元素。(用于html)
16. p:empty
	选择没有子元素的每个 <p> 元素(包括文本节点)。
17. #news:target
	选择当前活动的 #news 元素。
18. input:enabled
	选择每个启用的 <input> 元素。
19. input:disabled
	选择每个禁用的 <input> 元素
20. 	input:checked
	选择每个被选中的 <input> 元素。
21. :not(p)
		选择非 <p> 元素的每个元素。
22. ::selection
	选择被用户选取的元素部分。

以上css选择器的属性就是css3新增的,目前有部分属性各大主流浏览器暂不支持。请自行检查是否兼容!

在这里插入图片描述
在这里插入图片描述

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值