3、CSS入门——CSS选择器

[1. 选择器是什么](#1. 选择器是什么)
[2. 选择器列表](#2. 选择器列表)
[3. 选择器的种类](#3. 选择器的种类)
- [3.1 类型、类和ID选择器](#3.1 类型、类和ID选择器)
- [3.2 标签属性选择器](#3.2 标签属性选择器)
- [3.3 伪类与伪元素](#3.3 伪类与伪元素)
- [3.4 运算符](#3.4 运算符)
参考

1. 选择器是什么

CSS选择器是CSS规则的第一部分。它是元素和其他部分组成起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式。选择器所选择的元素，叫做选择器的对象。

CSS中，选择器由CSS选择器规范加以定义。就像CSS的其他部分那样，它们需要浏览器的支持才能工作。你会遇到的大多数选择器都是在CSS 3中定义的，这是一个成熟的规范，因此你会发现浏览器对这些选择器有良好的支持。

2. 选择器列表

如果你有多个使用相同样式的CSS选择器，那么这些单独的选择器可以混编为一个选择器列表，这样，规则就可以应用到所有的单个选择器上了。

css 复制代码

h1 {
	color: blue;
}

.special {
	color: blue;
}

可以将它们组合起来，在它们之间加上一个逗号，变为选择器列表。

css 复制代码

h1, .special {
	color: blue;
}

空格可以在逗号前或后，你可能还会发现如果每个选择器都另起一行，会更好读。

css 复制代码

h1,
.special {
	color: blue;
}

将有相同声明的选择器组合起来。

html 复制代码

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <title>开始学习 CSS</title>
</head>

<body>
<h1>Type selectors</h1>
<p>
    Veggies es bonus vobis, proinde vos postulo essum magis
    <span>kohlrabi welsh onion</span> daikon amaranth tatsoi tomatillo melon azuki
    bean garlic.
</p>

<p>
    Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley
    shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra
    wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
</p>

<p>
    Turnip greens yarrow ricebean rutabaga <em>endive cauliflower</em> sea lettuce
    kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter
    purslane kale. Celery potato scallion desert raisin horseradish spinach
</p>
</body>
</html>

css 复制代码

body {
	font-family: sans-serif;
}

span {
	background-color: yellow;
}

strong,
em {
	color: rebeccapurple;
}

当你使用选择器列表时，如果任何一个选择器无效，那么整条规则都会被忽略。不使用选择器列表时，无效的选择器也会被忽略。

3. 选择器的种类

3.1 类型、类和ID选择器

这个选择器组，第一个是指向了所有HTML元素<h1>。

css 复制代码

h1 {
}

它包含了一个class的选择器。

css 复制代码

.box {
}

id选择器：

css 复制代码

#unique {
}

3.2 标签属性选择器

这组选择器根据一个元素上的某个标签的属性的存在以选择元素的不同方式。

css 复制代码

a[title] {
}

或者根据一个有特定值的标签属性是否存在来选择。

css 复制代码

a[href="https://example.com"] {
}

3.3 伪类与伪元素

这组选择器包含了伪类，用来样式化一个元素的特定状态。例如:hover伪类会在鼠标指针悬浮到一个元素上的时候选择这个元素。

css 复制代码

a:hover {
}

它还可以包含了伪元素，选择一个元素的某个部分而不是元素自己。例如，::first-line是会选择一个元素中的第一行。

css 复制代码

p::firse-line {
}

3.4 运算符

最后一组运算符可以将其他选择器组合起来，更复杂的选择元素。>选择了作为<article>元素的直接子元素的所有<p>元素。

css 复制代码

article > p {
}

参考

1、CSS选择器

3、CSS入门——CSS选择器

目录

1. 选择器是什么

2. 选择器列表

3. 选择器的种类

3.1 类型、类和ID选择器

3.2 标签属性选择器

3.3 伪类与伪元素

3.4 运算符

参考