CSS 选择器

一、 CSS 语法 及 注释

1. 语法

CSS规则有两个主要部分,一个 选择器 和 一个或多个 声明

选择器:指定CSS规则适用于HTML页面中的哪个元素。

声明:决定了元素在网页上的格式。

每个声明都包含一个属性和一个值,这些值和值之间用冒号(:)分隔并以分号(;)结尾,并且声明组用花括号括起来{}

注意:

​ 虽然CSS属性名称和许多属性值都不区分大小写。但是CSS选择器是区分大小写,例如:.maincontent.mainContent是两个不同的class类选择器,是区分大小写的。

2. 注释

CSS注释以开头/*,以结束*/

1
2
3
4
5
/* 这是一段注释 */
p {
font-size: 18px;
text-transform: uppercase;
}

二、 基础 选择器

选择器是CSS最重要的方面之一,因为它们用于选择网页上的元素,以便可以设置样式。

1,基本选择器语法
选择器类型功能描述
*通配选择器选择文档中所有HTML元素
E元素选择器选择指定类型的HTML元素
#idID选择器选择指定ID属性值为“id”的任意类型元素
.class类选择器选择指定class属性值为“class”的任意类型的任意多个元素
selector1,selectorN群组选择器将每一个选择器匹配的元素集合
2,层次选择器语法
选择器类型功能描述
E F后代选择器(包含选择器)选择匹配的F元素,且匹配的F元素被包含在匹配的E元素内
E>F子选择器选择匹配的F元素,且匹配的F元素所匹配的E元素的子元素
E+F相邻兄弟选择器选择匹配的F元素,且匹配的F元素紧位于匹配的E元素的后面
E~F通用选择器选择匹配的F元素,且位于匹配的E元素后的所有匹配的F元素
3,动态伪类选择器语法
选择器类型功能描述
E:link链接伪类选择器选择匹配的E元素,而且匹配元素被定义了超链接并未被访问过。常用于链接描点上
E:visited链接伪类选择器选择匹配的E元素,而且匹配元素被定义了超链接并已被访问过。常用于链接描点上
E:active用户行为选择器选择匹配的E元素,且匹配元素被激活。常用于链接描点和按钮上
E:hover用户行为选择器选择匹配的E元素,且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover
E:focus用户行为选择器选择匹配的E元素,而且匹配元素获取焦点
4,目标伪类选择器
选择器功能描述
E:target选择匹配E的所有元素,且匹配元素被相关URL指向
5,UI元素状态伪类选择器语法
选择器类型功能描述
E:checked选中状态伪类选择器匹配选中的复选按钮或者单选按钮表单元素
E:enabled启用状态伪类选择器匹配所有启用的表单元素
E:disabled不可用状态伪类选择器匹配所有禁用的表单元素
6,结构伪类选择器使用语法
选择器功能描述
E:first-child作为父元素的第一个子元素的元素E。与E:nth-child(1)等同
E:last-child作为父元素的最后一个子元素的元素E。与E:nth-last-child(1)等同
E:root选择匹配元素E所在文档的根元素。在HTML文档中,根元素始终是html,此时该选择器与html类型选择器匹配的内容相同
E F:nth-child(n)选择父元素E的第n个子元素F。其中n可以是整数(1,2,3)、关键字(even,odd)、可以是公式(2n+1),而且n值起始值为1,而不是0.
E F:nth-last-child(n)选择父元素E的倒数第n个子元素F。此选择器与E:nth-child(n)选择器计算顺序刚好相反,但使用方法都是一样的,其中:nth-last-child(1)始终匹配最后一个元素,与last-child等同
E:nth-of-type(n)选择父元素内具有指定类型的第n个E元素
E:nth-last-of-type(n)选择父元素内具有指定类型的倒数第n个E元素
E:first-of-type选择父元素内具有指定类型的第一个E元素,与E:nth-of-type(1)等同
E:last-of-type选择父元素内具有指定类型的最后一个E元素,与E:nth-last-of-type(1)等同
E:only-child选择父元素只包含一个子元素,且该子元素匹配E元素
E:only-of-type选择父元素只包含一个同类型子元素,且该子元素匹配E元素
E:empty选择没有子元素的元素,而且该元素也不包含任何文本节点

注:(1),“ul>li:nth-child(3)”表达的并不是一定选择列表ul元素中的第3个子元素li,仅有列表ul中第3个li元素前不存在其他的元素,命题才有意义,否则不会改变列表第3个li元素的样式。

(2),:nth-child(n) 中参数只能是n,不可以用其他字母代替。

(3),:nth-child(odd) 选择的是奇数项,而使用:nth-last-child(odd) 选择的却是偶数项

7,否定伪类选择器
选择器功能描述
E:not(F)匹配所有除元素F外的E元素
8,属性选择器语法
选择器功能描述
[attribute]用于选取带有指定属性的元素。
[attribute=value]用于选取带有指定属性和值的元素。
[attribute~=value]用于选取属性值中包含指定词汇的元素。
[attribute\=value]用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。
[attribute^=value]匹配属性值以指定值开头的每个元素。
[attribute$=value]匹配属性值以指定值结尾的每个元素。
[attribute**=value*]匹配属性值中包含指定值的每个元素。

1. 标签选择器

标签选择器:即以 HTML 标签 作为 CSS 修饰所用的选择器。

1
2
3
h3 {
color: red;
}

2. class 类 选择器 .

class 选择器用于描述一组元素的样式,可以在多个元素中使用。

class 选择器在 HTML 中以 class 属性表示, 在 CSS 中,类选择器以一个点”.“号显示。

可以对所有 拥有该类名 的标签使用

1
.center {text-align:center;}

也可以对特定 拥有该类名 的标签使用

1
p.center {text-align:center;}

多类名 选择器

可以把一些 HTML 标签 相同的样式 放到同一个类中

HTML 标签中,多个类名之间需要用 空格 隔开

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.size {
width: 100px;
height: 100px;
font-size: 30px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
</style>
</head>
<body>
<div id="box">
<div class="size red">红色</div>
<div class="size green">绿色</div>
<div class="size red">红色</div>
</div>
</body>

3. id 选择器 #

id 选择器: 可以为标有特定 id 的 HTML 标签指定特定的样式。

HTML 元素以 id 属性来设置 id 选择器,CSS 中 id 选择器以 #来定义。

以 id 作为选择器时,只能被 调用一次,不能多次调用

1
2
3
4
#para1 { 
text-align:center;
color:red;
}

id 选择器和 类 选择器的区别

  • 被调用次数不同
    • 类选择器可以被多次调用(类似 人名)
    • id 选择器只能被调用一次(类似 身份证)
  • 表达方式不同
    • 类 选择器用 “.” 英文 句号 表示
    • id 选择器用 “#” 表示
  • 使用场景不同
    • 类 选择器 可用于所有 标签
    • id 选择器 主要和 JavaScript 搭配使用

4. 通配符 选择器 *

通用选择器(用*星号或星号表示)与页面上的每个单个元素匹配。

选择器通常用于 从元素中 删除 默认的 边距和填充,以进行快速测试。

*选择器内的样式规则将应用于文档中的每个元素。

1
2
3
4
* {
margin: 0;
padding: 0;
}

三、 复合 选择器

1. 后代选择器 空格

当需要选择一个元素是另一个元素的后代时,可以使用这些选择器

语法:

1
元素1 元素2 {样式}

注意:

  1. 元素1 为父标签,元素2 为子标签,元素2 为目标标签
  2. 元素1 和 元素2 之间要用 空格 隔开
1
2
3
4
5
6
ul.menu li a {
text-decoration: none;
}
h1 em {
color: green;
}

代码说明:

  1. ul.menu li a : 表示 类名为 menu 的无序列表中的 li 标签 中包含的 a 标签
  2. h1 em : 表示 h1 标签中 包含的 em 标签

2. 子选择器 >

子选择器: 只能用于选择作为某些元素的直接子元素,即距离父元素 最近 的子元素

语法:

1
元素1 > 元素2 {样式}

注意:

  1. 元素1 为父标签,元素2 为距离最近的子标签,元素2 为目标标签
  2. 元素1 和 元素2 之间要用 > 隔开
1
2
3
4
5
6
ul > li {
list-style: square;
}
ul > li ol {
list-style: none;
}

3. 兄弟 选择器 +

相邻的同级选择器可用于选择同级元素

该选择器的语法类似于:E1 + E2,其中 E2 是选择器的目标。

目标标签只有一个

1
2
3
4
5
6
7
8
h1 + p {
color: blue;
font-size: 18px;
}
ul.task + p {
color: #f0f;
text-indent: 30px;
}

代码说明:

  1. h1 + p : 标签 p 为目标标签, p 和 h1 标签在同一个父标签下,并且相邻
  2. ul.task + p : 标签 p 为目标标签,无序列表 ul 和 p 标签在同一个父标签下,并且 ul 标签有类名 task,和 p 标签相邻

4. 通用 兄弟 选择器 ~

通用的同级选择器由两个简单的选择器组成,这些选择器由波浪号()字符分隔。

E1〜E2,其中E2是选择器的目标。

目标标签有很多个

1
2
3
4
5
6
7
8
h1p {
color: blue;
font-size: 18px;
}
ul.taskp {
color: #f0f;
text-indent: 30px;
}

代码说明:

  1. h1 ~ p:目标标签为 h1 标签后的所有 同一 父 标签下的 p 标签
  2. ul.task ∼ p : 目标标签是 类名为task 的 ul 标签 之后 和 它在 同一 父 标签下 的 p 标签

5. 并集 选择器 ,

样式表中的多个选择器通常共享相同的样式规则声明

您可以将它们分组为一个逗号分隔的列表,以最大程度地减少样式表中的代码

分组前:

1
2
3
4
5
6
7
8
9
10
11
12
h1 {
font-size: 36px;
font-weight: normal;
}
h2 {
font-size: 28px;
font-weight: normal;
}
h3 {
font-size: 22px;
font-weight: normal;
}

分组后:

1
2
3
4
h1, h2, h3 {font-weight: normal;}
h1 {font-size: 36px;}
h2 {font-size: 28px;}
h3 {font-size: 22px;}

6. 伪类选择器 :

伪类选择器: 用于向某些选择器添加特殊效果,如:给链接添加效果

语法:

选择器类型功能描述
E:link链接伪类选择器选择所有未被访问过的超链接。常用于链接描点上
E:visited链接伪类选择器选择所有已被访问过的超链接。常用于链接描点上
E:hover用户行为选择器选择鼠标指针位于其上的连接
E:active用户行为选择器选择活动链接(鼠标按下未弹起的链接)
E:focus用户行为选择器选择获取焦点(光标)的表单元素

1. 连接伪类

1
2
3
4
5
6
7
8
9
/* 没有被访问过的链接 */
a:link {
color: #333;
}

/* 已经被访问过的链接 */
a:visited {
color: yellow;
}

2. 用户操作伪类

1
2
3
4
5
6
7
8
9
/* 鼠标在其上方的链接 */
a:hover {
color: red;
}

/* 鼠标点击没有松开的链接 */
a:active {
color: blue;
}

3. 表单伪类

1
2
3
input:focus {
background-color: peachpuff;
}

注意:

  1. 为了保证生效,按照 LVHA 的顺序声明: link 、visited、 hover 、active
  2. 给连接指定样式时,需要单独指定

实际开发中写法:

1
2
3
4
5
6
7
8
9
/* 给所有连接特点的样式 */
a {
color: #333;
}

/* 鼠标在其上方的链接 */
a:hover {
color: red;
}