第13章 CSS选择器[下]

2017年8月24日09:06:21 发表评论

本章主要探讨 HTML5 中 CSS 选择器中的伪类选择器,和伪元素选择器一样,面向某种共同特征来选择元素。

一.伪类选择器总汇

伪类选择器分为四种类型:结构性伪类、UI 伪类、动态伪类和其他伪类选择器,具体如下:

选择器 名称 说明 CSS 版本
:root 根元素选择器 选择文档中的根元素 3
:first-child 子元素选择器 选择元素中第一个子元素 2
:last-child 子元素选择器 选择元素中最后一个子元素 3
:only-child 子元素选择器 选择元素中唯一子元素 3
:only-of-type 子元素选择器 选择指定类型的唯一子元素 3
:nth-child(n) 子元素选择器 选择指定 N 个子元素 3
:enabled UI 选择器 选择启用状态的元素 3
:disabled UI 选择器 选择禁用状态的元素 3
:checked UI 选择器 选择被选中 input 勾选元素 3
:default UI 选择器 选择默认元素 3
:valid UI 选择器 验证有效选择 input 元素 3
:invalid UI 选择器 验证无效选择 input 元素 3
:required UI 选择器 有 required 属性选择元素 3
:optional UI 选择器 无 required 属性选择元素 3
:link 动态选择器 未访问的超链接元素 1
:visited 动态选择器 已访问的超链接元素 1
:hover 动态选择器 悬停在超链接上的元素 2
:active 动态选择器 激活超链接上的元素 2
:foucs 动态选择器 获取焦点的元素 2
:not 其它选择器 否定选择的元素 3
:empty 其它选择器 选择没有任何内容的元素 3
:lang 其它选择器 选取包含 lang 属性的元素 2
:target 其它选择器 选取 URL 片段标识指向元素 3

二.结构性伪类选择器

结构性伪类选择器能够根据元素在文档中的位置选择元素。 这类元素都有一个前缀 (:) 。

1.根元素选择器

:root {
    border: 1px solid red;
}

解释:匹配文档中的根元素,基本不怎么用,因为总是返回<html>元素。

2.子元素选择器

ul > li:first-child {
    color: red;
}

解释:选择第一个子元素。

ul > li:last-child {
    color: red;
}

解释:选择最后一个子元素。

ul > li:only-child {
    color: red;
}

解释:选择只有一个子元素的那个子元素。

div > p:only-of-type {
    color: red;
}

解释:选择只有一个指定类型的子元素的那个子元素。

3.:nth-child(n)系列

ul > li:nth-child(2) {
    color: red;
}

解释:选择子元素的第二个元素。

ul > li:nth-last-child(2) {
    color: red;
}

解释:选择子元素倒数第二个元素。

div > p:nth-of-type(2) {
    color: red;
};

解释:选择特定子元素的第二个元素。

div > p:nth-last-of-type(2) {
    color: red;
};

解释:选择特定子元素的倒数第二个元素。

三.UI 伪类选择器

UI 伪类选择器是根据元素的状态匹配元素。

1.:enabled

:enabled {
    border: 1px solid red;
}

解释:选择启用状态的元素。

2.:disabled

:disabled {
    border: 1px solid red;
}

解释:选择禁用状态的元素。

3.:checked

:checked {
    display: none;
}

解释:选择勾选的 input 元素。

4.:default

:default {
    display: none;
}

解释:从一组类似的元素中选择默认元素。比如 input 被勾选的即默认的。

5.:valid 和:invalid

input:valid {
    border: 1px solid blue;
}
input:invalid {
    border: 1px solid green;
}

解释:输入验证合法与不合法显示时选择的元素。

6.:required 和:optional

input:required {
    border: 1px solid blue;
}
input:optional {
    border: 1px solid green;
}

解释:根据是否具有 required 属性选择元素。

四.动态伪类选择器

动态伪类选择器根据条件的改变匹配元素。

1.:link 和 visited

a:link {
    color: red;
}
a:visited {
    color: orange;
}

解释::link 表示未访问过的超链接,:visited 表示已访问过的超链接。

2.:hover

a:hover {
    color: blue;
}

解释:表示鼠标悬停在超链接上。

3.:active

a:active {
    color: green;
}

解释:表示鼠标按下激活超链接时。

4.:focus

input:focus {
    border: 1px solid red;
}

解释:表示获得焦点时。

五.其他伪类选择器

1.:not

a:not([href*="baidu"]) {
    color: red;
}

解释:否定选择器,反选。

2.:empty

:empty {
    display: none;
}

解释:匹配没有任何内容的元素。

3.:lang

:lang(en) {
    color: red;
}

解释:选择包含 lang 属性,属性值前缀为 en 的元素。和属性选择器匹配结果一致。

4.:target

:target {
    color: red;
}

解释:定位到锚点时,选择此元素。

5.::selection

::selection {
    color: red;
}

解释:这是一个伪元素选择器,当选择文字时触发选择。CSS3 版本下的选择器。

注:本次教程共63节课(由大庆seo工程师整理发布),循序渐进地教您响应式网站的制作。1-13课时为html5内容,14-40课时为css3内容,41-51课时为pc端固定布局网站制作实例,52-57课时为移动端流体布局网站制作实例,58-63课时为响应式网站制作实例。最贴心的是每节课示例代码提供免费下载。小白从第一节课开始学起,将走向前端开发,特别是目前最为流行的响应式网站高手之路......

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 微信公众号扫一扫
  • weinxin
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: