CSS3:选择器
2024-10-20 23:14:16
CSS选择器的作用是找出某类元素,以便我们使用style元素或者外部样式表对这类元素设置样式。
基本选择器
选择器 | 含义 | 演示样例 | 描写叙述 |
---|---|---|---|
* | 选择全部元素 |
* { |
选择全部元素 |
<元素类型> | 选取一个文档中该元素的全部实例 |
a { |
选择a元素 |
.<类名>(或 *.<类名>) | 指定全局属性class为指定类的元素 |
.class2 { |
选中指定class2的全部类型的元素 |
<元素类型>.<类名> | 指定全局属性class为指定类的特定元素 |
span.class2 { |
选中指定class2的span元素 |
<元素类型>.<类名1>.<类名2> | 指定全局属性class指定了多个类的元素,即同一时候指定类名1和类名2的元素 |
span.class1.class2 { |
选中同一时候指定class1和class2的sapn元素 |
#<id> | 依据全局属性id的值选择元素 |
#w3canchor { |
选中id为w3canchor的元素 |
<元素类型>.#<id> | 依据指定元素类型的id值选择元素 |
span.#w3canchor { |
选中id为w3canchor的span元素 |
[<条件>]或<元素类型>[<条件>] | 匹配具有指定条件的属性的元素 |
[href] { |
匹配全部具有href属性的元素。见“元素属性选择器的条件” |
元素属性选择器的条件:
1)[attr]:选择定义attr属性的元素,忽略属性值。
2)[attr="val"]:选择定义attr属性,且属性值为val的元素;
3)[attr^="val"]:选择定义attr属性。且属性值以字符串val大头的元素;
4)[attr$="val"]:选择定义attr属性。且属性值以字符串val结尾的元素。
5)[attr*="val"]:选择定义attr属性,且属性值包括字符串val的元素;
6)[attr~="val"]:选择定义attr属性。且属性值具有多个值,当中一个为val的元素;
7)[attr|="val"]:选择定义attr属性。且属性值为连字符切割的多个值,当中第一个为字符串val的元素。
2)[attr="val"]:选择定义attr属性,且属性值为val的元素;
3)[attr^="val"]:选择定义attr属性。且属性值以字符串val大头的元素;
4)[attr$="val"]:选择定义attr属性。且属性值以字符串val结尾的元素。
5)[attr*="val"]:选择定义attr属性,且属性值包括字符串val的元素;
6)[attr~="val"]:选择定义attr属性。且属性值具有多个值,当中一个为val的元素;
7)[attr|="val"]:选择定义attr属性。且属性值为连字符切割的多个值,当中第一个为字符串val的元素。
复合选择器
选择器 | 含义 | 演示样例 | 描写叙述 |
---|---|---|---|
<选择器1>,<选择器2>,<选择器3> | 选择器1、选择器2和选择器3匹配的全部元素的并集 |
a,[lang|="en"] { |
选中a元素和具有属性lang,且属性值第一个为en的元素 |
<选择器1> <选择器2> | 匹配选择器1的元素的后代元素中匹配选择器2的元素 |
p span { |
匹配p元素的后代span元素 |
<选择器1> > <选择器2> | 匹配选择器1的元素的直接后代元素(子元素)中匹配选择器2的元素 |
body > * > span, tr > th { |
匹配body元素的随意子元素的span子元素,在匹配tr元素的th子元素 |
<选择器1> + <选择器2> | 匹配选择器1的元素的兴许相邻的兄弟元素中匹配选择器2的元素 |
p + a { |
匹配紧跟在p元素之后的a元素 |
<选择器1> ~ <选择器2> | 匹配选择器1的元素的兴许兄弟元素中匹配选择器2的元素 |
p ~ a { |
匹配p元素之后的a元素 |
伪元素选择器
选择器 | 含义 | 演示样例 | 说明 |
---|---|---|---|
::first-line | 文本内容的首行 |
::first-line { |
匹配p元素的文本的首行 |
::first-letter | 文本内容的首字母 |
::first-letter { |
匹配全部文本的首字母 |
:before :after |
在选中元素的内容之前插入内容 在选中元素的内容之后插入内容 |
a:before { |
分别在a元素的之前和之后插入内容 |
结构性伪类选择器
选择器 | 含义 | 演示样例 | 说明 |
---|---|---|---|
:root | 选择文档中的根元素。总是返回html |
:root { |
|
:first-child | 父元素的第一个子元素 |
p > span:first-child { |
匹配p元素的第一个span子元素 |
:last-child | 父元素的最后一个子元素 |
:last-child { |
匹配全部最后的子元素 |
:only-child | 匹配父元素包括的唯一子元素 |
:only-child { |
匹配仅有一个子元素的元素 |
:only-of-type | 匹配父元素仅有一种类型子元素的全部子元素 |
:only-of-type { |
使用nth-child选择器
:nth-child(n):选择父元素的第n个子元素
:nth-last-child(n):选择父元素的倒数第n个子元素
:nth-of-type(n):选择父元素定义类型的第n个子元素
:nth-last-of-type(n):选择父元素定义类型的倒数第n个子元素
UI伪类选择器
选择器 | 含义 | 演示样例 | 说明 |
---|---|---|---|
:enabled和:disabled | 选择启用或禁用的元素,该选择器不会匹配没有禁用状态的元素 |
:enabled { |
匹配启用的全部元素 |
:checked | 选择由checked属性或用户勾选的单选button或者复选框 |
:checked + span { |
匹配勾选的元素后直接相邻的span元素 |
:default | 选择一组相似元素中的默认元素。比如:提交button总是表单的默认button |
:default { |
|
:value和:invalid | 分别匹配符合和不符合它们的输入验证要求的input元素 |
:invalid { |
|
:in-range :out-of-range |
匹配位于指定范围内的input元素 匹配位于指定范围之外的input元素 |
:in-range { |
注意:仅部分浏览器支持 |
:required :optional |
匹配具有required属性的input元素 匹配没有required属性的input元素 |
:required { |
动态伪类选择器
选择器 | 含义 | 演示样例 | 说明 |
---|---|---|---|
:link :visited |
择链接元素 选择用户已訪问的链接元素 |
:link { |
|
:hover | 鼠标悬停在其上的元素 |
button:hover { |
匹配鼠标悬停在其上的button元素 |
:active | 当前被用户激活的元素,通常意味着用户即将点击该元素 |
:active { |
|
:focus | 当前获得焦点的元素 |
input:focus { |
选择获取焦点的input元素 |
其他伪类选择器
选择器 | 含义 | 演示样例 | 说明 |
---|---|---|---|
:not(<选择器>) | 对括号内选择器的选择取反 |
a:not([href*="apress"]) { |
匹配href属性没有包括字符串apress的a元素 |
:empty | 没有子元素的元素 | ||
:lang(<目标语言>) | 选择基于lang全局属性值的元素 |
:lang(en) { |
匹配具有lang属性,且内容採用英文表达的元素 |
:target | URL片段标识符指向的元素 |
:target { |
最新文章
- python time和datetime的常用转换处理
- 用Jedis连接Redis
- MySQL修改,表结构大幅修改
- MVC 下拉單數據內容綁定
- linux环境内存分配原理 mallocinfo
- mvc中@RenderSection()研究
- 9.5noip模拟试题
- poj 2309
- Func和Action委托简单用法
- 解决spring-boot启动中碰到的问题:Cannot determine embedded database driver class for database type NONE
- mysql用limit时offset越大时间越长
- jdk源码阅读笔记-AbstractStringBuilder
- Window10升级遇到大坑错误代码:0xc000000e完美解决方案
- Comet OJ - Contest #1
- python 开发练习之 监控
- IDEAL启动项目的时候报java.lang.NoClassDefFoundError: javax/servlet/Filter错误
- ucos中信号量 事件标志 消息队列都怎么用
- java的多态性
- Python&#160;date,datetime,time等相关操作总结
- 《Unix&;Linux大学教程》学习笔记四:标准I/O 与 过滤器