1.伪类选择器是通过单冒号(:)和特定的具有某种含义的单词来确定所选元素。2.所谓伪类选择器,是相对于类选择器来说的。伪类选择器类似于添加类,所以可以是多个。3.伪类的语法
1. 伪类选择器是通过单冒号(:)和特定的具有某种含义的单词来确定所选元素。
2. 所谓伪类选择器, 是相对于"类选择器"来说的。伪类选择器类似于添加类, 所以可以是多个。
3. 伪类的语法:
selector : pseudo-class {property: value;
}
4. 锚伪类
4.1. 在支持CSS的浏览器中, 链接的不同状态可以使用不同的方式显示, 这些状态包括: 活动状态(按下鼠标, 可以一直按下鼠标), 已被访问状态, 未被访问状态和鼠标悬停状态。
/* 未访问的链接 */
a:link {color: #FF0000;
}
/* 已访问的链接 */
a:visited {color: #00FF00;
}
/* 鼠标移动到链接上 */
a:hover {color: #FF00FF;
}
/* 选定的链接 */
a:active {color: #0000FF;
}
4.2. 在CSS定义中, a:hover必须被置于a:link和a:visited之后, 才是有效的。
4.3. 在CSS定义中, a:active必须被置于a:hover之后, 才是有效的。
4.4. 伪类名称对大小写不敏感。
4.5. 例子
4.5.1. 代码
这是一个链接。
注释&＃xff1a;在 CSS 定义中&＃xff0c;a:hover 必须位于 a:link 和 a:visited 之后&＃xff0c;这样才能生效&＃xff01;
注释&＃xff1a;在 CSS 定义中&＃xff0c;a:active 必须位于 a:hover 之后&＃xff0c;这样才能生效&＃xff01;
4.5.2. 效果图
5. :first-child伪类
5.1. :first-child伪类来选择做为某元素的第一个子元素(必须是第一个子元素)的元素。
5.2. 这个特定伪类很容易遭到误解, 所以有必要举例来说明。考虑以下标记:
These are the necessary steps:
- Intert Key
- Turn key clockwise
- Push accelerator
Do not push the brake at the same time as the accelerator.
5.2.1. 在上面的例子中, 作为第一个元素的元素包括第一个p、第一个li和em和i元素。
5.2.2. 给定以下规则:
p:first-child {font-weight: bold;
}
li:first-child {text-transform: uppercase;
}
5.2.3. 第一个规则将作为某元素第一个子元素的所有p元素设置为粗体。第二个规则将作为某个元素(在html中, 这肯定是ol或ul元素)第一个子元素的所有li元素变成大写。
5.3. 最常见的错误是认为p:first-child之类的选择器会选择p元素的第一个子元素。
5.4. 必须声明, 这样:first-child才能在IE中生效。
5.5. 例子
5.5.1. 代码
These are the necessary steps:
- Intert Key
- Turn key clockwise
- Push accelerator
Do not push the brake at the same time as the accelerator.
5.5.2. 效果图
6. :last-child伪类
6.1. :last-child选择器匹配属于其父元素的最后一个子元素(必须是最后一个子元素)的元素。
6.2. 例子
6.2.1. 代码
These are the necessary steps:
- Intert Key
- Turn key clockwise
- Push accelerator
Do not push the brake at the same time as the accelerator.
6.2.2. 效果图
7. :nth-child(n)伪类
7.1. :nth-child(n)选择器匹配属于其父元素的第n个子元素(必须是第n个子元素)的元素, 不论元素的类型。
7.2. n可以是数字、关键词或公式。
7.3. odd和even是可用于匹配下标是奇数或偶数的子元素的关键词(第一个子元素的下标是: 1)。
7.4. 例子
7.4.1. 代码
第一个段落。
第二个段落。
第三个段落。
第四个段落。
第五个段落。
7.4.2. 效果图
8. :nth-last-child(n)伪类
8.1. :nth-last-child(n)选择器匹配属于其父元素的第n个子元素(必须是第n个子元素)的元素, 不论元素的类型, 从最后一个子元素开始计数。
8.2. 例子
8.2.1. 代码
第一个段落。
第二个段落。
第三个段落。
第四个段落。
第五个段落。
8.2.2. 效果图
9. :nth-of-type(n)伪类
9.1. :nth-of-type(n)选择属于父元素的特定类型的第n个子元素(按照类型匹配, 不一定是父元素的第n个元素, 可能大于等于n)的元素。
9.2. 例子
9.2.1. 代码
第一个段落。
第二个段落, 但是p给换成了b。第三个段落。
第四个段落。
第五个段落。
9.2.2. 效果图
10. nth-last-of-type(n)伪类
10.1. nth-last-of-type(n)选择属于父元素的特定类型的第n个子元素(按照类型匹配, 不一定是父元素的第n个元素, 可能大于等于n)的元素, 从最后一个子元素开始计数。
10.2. 例子
10.2.1. 代码
第一个段落。
第二个段落。
第三个段落。
第四个段落, 但是p给换成了b。第五个段落。
10.2.2. 效果图
11. :first-of-type伪类
11.1. :first-of-type选择属于其父元素的特定类型的首个子元素(按照类型匹配, 不一定是父元素的第一个元素)的元素。
11.2. 例子
11.2.1. 代码
第一个段落, 但是p给换成了b。第二个段落。
第三个段落。
第四个段落。
第五个段落。
11.2.2. 效果图
12. :last-of-type伪类
12.1. :last-of-type选择属于其父元素的特定类型的最后一个子元素(按照类型匹配, 不一定是父元素的第最后一个元素)的元素。
12.2. 例子
12.2.1. 代码
第一个段落。
第二个段落。
第三个段落。
第四个段落。
第五个段落, 但是p给换成了b。
12.2.2. 效果图
13. :only-child伪类
13.1. only-child选择属于其父元素的唯一子元素的元素(父元素只能有一个元素)。
14. :only-of-type伪类
14.1. only-of-type选择属于其父元素的特定类型的唯一子元素的元素(父元素可以有多个元素, 但是该类型只能有一个)。
14.2. 例子
14.2.1. 代码
body只有一个p元素, p:only-child和p:only-of-type都起作用。第一个段落。
14.2.2. 效果图
15. :lang(en)伪类
15.1. :lang(en)伪类使你有能力为不同的语言定义特殊的规则。
15.2. 例子
15.2.1. 代码
文字开始段落中的引用的文字
文字结束
This is a big
quote
15.2.2. 效果图
16. :focus伪类
16.1. :focus选择器用于选取获得焦点的元素。
16.2. 例子
16.2.1. 代码
在文本框中点击, 您会看到黄色的背景:
First name:
Last name:
16.2.2. 效果图
17. :root伪类
17.1. :root选择器匹配文档根元素。
17.2. 在html中, 根元素始终是html元素。
18. :empty伪类
18.1. :empty选择器匹配没有子元素(包括文本节点, 也就是说该元素既没有子元素也不能包含文本)的元素。
18.2. 例子
18.2.1. 代码
第一个段落。
第二个段落。
第三个段落。
18.2.2. 效果图
19. :not伪类
19.1. :not(selector)选择器匹配非指定元素/选择器的元素。
19.2. 例子
19.2.1. 代码
第一个段落。
第二个段落。
第三个段落。
第四个段落。
19.2.2. 效果图
20. :target伪类
20.1. :target选择器可用于选取当前活动的目标元素。
20.2. URL带有后面跟有锚名称, 指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。
20.3. 例子
20.3.1. 代码
点击下面的链接, :target选择器会突出显示当前活动的html锚。
跳转至内容 1
跳转至内容 2
内容 1...
内容 2...
注释: Internet Explorer 8以及更早的版本不支持:target选择器。
20.3.2. 效果图
21. enabled和disabled伪类
21.1. :enabled选择器匹配每个已启用的元素(大多用在表单元素上)。
21.2. :disabled选择器匹配每个被禁用的元素(大多用在表单元素上)。
21.3. 例子
21.3.1. 代码
First name:
Last name:
Country:
21.3.2. 效果图
22. 伪类列表
京公网安备 11010802041100号