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
h1 ∼ p {
    color: blue;
    font-size: 18px;
    }
ul.task ∼ p {
    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;
}