您现在的位置是:网站首页>列表内容
CSS3中的常用选择器使用示例整理css3之UI元素状态伪类选择器实例演示总结30个CSS3选择器 css3类选择器之结合元素选择器和多类选择器用法IE8下CSS3选择器nth-child() 不兼容问题的解决方法对CSS3选择器的研究(详解)详解CSS3中属性选择器新增加的特性CSS3 新增选择器的实例
2023-10-22 13:59:02 153人已围观
简介 这篇文章主要介绍了CSS3中的常用选择器使用示例整理,是CSS3入门学习中的基础知识,需要的朋友可以参考下
1. 根选择器 :root
:root{}就等同于html{}, 一般来说, 推荐使用:root{}.
- :root选择器的演示
2. 否定选择器 :not
否定选择器, 就是除此之外的
-
- "text" name="name" id="name" placeholder="请填写账号" />
-
- "password" name="password" id="password" placeholder="请填写密码" />
-
- "submit" value="Submit" />
3. 空选择器 :empty
注意: :empty 只对一点内容都没有的元素生效, 哪怕有一个空格都不行.
- 我这里有内容
4.目标选择器 :target
超链接地址, 与id对应
-
"#test">test
-
"not_show" id="test">
- 这是一个测试
-
"#pipi">pipi
-
"pipi">
- content for pipi
-
"#ruby">ruby
-
"ruby">
- content for ruby
-
"#aaron">Brand
-
"aaron">
- content for aaron
5. 第一个与最后一个子元素 :first-child :last-child
6. 指定子元素选择器/奇偶选择器 :nth-child(n) :nth-last-child(n)
-
- item1
-
- item2
-
- item3
-
- item4
-
- item5
-
- item6
-
- item7
-
- item8
-
- item9
-
- item10
7. 第一个与最后一个匹配类型的子元素 first-of-type last-of-type
-
"wrapper">我是一个块元素,我是.wrapper的第一个子元素
我是一个段落元素,我是不是.wrapper的第一个子元素,但是他的第一个段落元素
我是一个段落元素
我是一个块元素
8. 指定匹配类型子元素选择器/匹配类型奇偶选择器 :nth-of-type(n) :nth-last-of-type(n)
-
"wrapper">我是一个Div元素
我是一个段落元素
我是一个Div元素我是一个段落
我是一个Div元素我是一个段落
我是一个Div元素我是一个段落
我是一个Div元素我是一个段落
我是一个Div元素我是一个段落
我是一个Div元素我是一个段落
我是一个Div元素我是一个段落
9. 唯一子元素选择器 only-child
匹配的元素的父元素中仅有一个子元素,而且是一个唯一的子元素
-
"post">
我是一个段落
我是一个段落
-
"post">
我是一个段落
10. 唯一匹配类型的子元素 only-of-type
-
"wrapper">
我是一个段落
我是一个段落
我是一个段落
我是一个Div元素 -
"wrapper">我是一个Div
- 我是一个列表项
我是一个段落
11. 可用选择器 :enabled
-
- "text" name="name" id="name" placeholder="可用输入框" />
-
- "text" name="name" id="name" placeholder="禁用输入框" disabled="disabled" />
12. 不可用选择器 :disabled
-
- "text" name="name" id="name" placeholder="我是可用输入框" />
-
- "text" name="name" id="name" placeholder="我是不可用输入框" disabled />
13. 被选中选择器 :checked
-
"wrapper">"box">
- "checkbox" checked="checked" id="usename" />√
"usename">我是选中状态 -
"wrapper">"box">
- "checkbox" id="usepwd" />√
14. 被鼠标选中, 高亮选择器 ::selection
拿鼠标选中我, 试试看!
15. 只读选择器 :read-only
-
- "text" name="name" id="name" placeholder="大漠" />
-
- "text" name="address" id="address" value="中国上海" readonly />
16. 非只读选择器 :read-write
-
- "text" name="name" id="name" placeholder="大漠" />
-
- "text" name="address" id="address" placeholder="中国上海" readonly="readonly" />