CSS 简明教程 - 选择器 - 简单教程，简单编程

CSS 选择器指定了需要定义样式的 HTML 元素

CSS 选择器主要有以下 6 种类型

元素选择器
Id 选择器
类选择器
属性选择器
后代选择器
( 儿 ) 子选择器

元素选择器

元素选择器直接使用元素名称来选择 HTML 元素

下面的代码选择了页面中的所有的 <p> 元素，并为它们的文字定义了剧中的红色的样式

p {
    text-align: center;
    color: red;
}

Id 选择器

Id 选择器使用 HTML元素的 id 属性来选择特定元素

Id 选择器只能选择一个 HTML 元素，因为 id 属性值在 HTML 文档中必须是唯一的

Id 选择器以 # 开头，后跟 Id 属性值

以下代码为 id="content" 的 HTML 元素定义了样式

#content {
    text-align: center;
    color: black;
    font-size: 14px;
}

注意1：id 属性值区分大小写

注意2: id 属性值不能以数字开头

类选择器

类选择器使用 HTML 元素的 class 属性来选择多个元素

不同于 id 选择器不同，类选择器可以选择多个 HTML 元素

类选择器以 . 开头，后跟类名

例如下面的代码为 class 属性包含了 center 的 HTML 元素定义了样式

.center {
    text-align: center;
    color: blue;
    font-weight: blod;
}

我们还可以为使用相同类名的特定 HTML 元素定义样式

例如下面的代码为 class 属性包含了 center 的 <p> 元素定义了样式

p.center {
    text-align: center;
    color: blue;
    font-weight: blod;
}

每个元素可以定义多个类

下面的代码中，我们可以看到第二个 <p> 元素定义了两个名为 center 和 large 的类

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
p.center {
    text-align: center;
    color: red;
}

p.large {

    font-size: 300%;

}
</style>
</head>

<body>
<h1 class="center">这个标题不会受到任何影响</h1>
<p class="center">这个段落将会居中对齐，且文字的颜色为红色</p>
<p class="center large">这个段落将会居中对齐，且文字的颜色为红色，同时会使用大一号的字体</p>
</body>
</html>

注意1：类属性值区分大小写

注意2：class 属性的值不能以数字开头

属性选择器

属性选择器使用 HTML 元素的指定属性来选择多个元素，而不仅仅是 class 属性和 id 属性

示例 1: 将包含了 title 属性的所有元素设置为红色，而不管属性的值是什么
```
*[title] {
    color:red;
}
```
示例 2: 将包含了 href 属性的 <a> 元素设置为红色，而不管属性的值是什么
```
a[href] {
    color:red;
}
```
示例 3: 将同时包含了 title 属性和 href 属性的元素设置为红色，而不管这些属性的值是什么
```
a[href][title] {
    color:red;
}
```
示例 4: 将包含了 href 属性且属性值为 https://www.twle.cn 的 <a> 元素设置为红色
```
a[href="https://www.twle.cn"] {
    color: red;
}
```
示例 5: 将同时包含了 href 属性和 title 属性且属性值为 https://www.twle.cn 和 TutorialDocs 的元素设置为红色
```
a[href="https://www.twle.cn"][title="TutorialDocs"] {
    color: red;
}
```
示例 6: 将 class 属性值包含了 important 的 <p> 元素设置为红色
```
p[class~="important"] {
    color: red;
}
```
这和下面的代码是不同的
```
p.important {
    color: red;
}
```
因为前者 important 可以是一个单独的类，也可以是类名中的一部分 is_important
示例 7: 对于任何元素，只要 lang 属性值为 en 或包含了 en 字符都会被设置为红色
```
*[lang|="en"] {
    color: red;
}
```

后代选择器

后代选择器可以选择 HTML 元素的后代元素，后代元素可以是任意层级的，比如儿子元素和孙子辈...元素

例如下面的代码，为 <h1> 元素中包含的任意层级的 <em> 元素设置样式

<!DOCTYPE html>
<html>
<head>
<style>
h1 em {
    color:red;
}
</style>
</head>
<body>

<h1>This is a <em>important</em> heading</h1>

<p>This is a <em>important</em> paragraph.</p>

</body>
</html>

上述规则将 <h1> 元素的 <em> 元素的文本变为红色，此规则不会选择其它元素中的 <em> 元素，例如段落 <p> 中的 <em> 元素

( 儿 ) 子选择器

与后代选择器相比，子选择器只能选择指定 HTML 元素的儿子元素

如果只想将样式应用于 <h1>元素的 <strong> 元素，可以这样写

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
h1 > strong {
    color:red;
}
</style>
</head>
<body>

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>

<h1>This is <em>really <strong>very</strong></em> important.</h1>

</body>
</html>

第一个 <h1> 元素中的两个 <strong> 元素将更改为红色，但第二个 <h1> 元素中的 <strong> 元素将保持不变

后记

其实 CSS 还支持更多的 CSS 选择器，但主要还是使用以上 6 种，作为初级教程，我们只会讲解这些，更多的 CSS 选择器，请访问 CSS 参考手册之 CSS 选择器