CSS 入门教程(2)：选择器

css 评论

选择器

CSS 选择器选择（查找）你想要设置样式的 HTML 元素。

CSS 提供多种选择器类型。

简单选择器

这是我们在第一课中学习的简单选择器。你只需指定 html 标签名称

1
2
3
p {
    font-size: 30px;
}

此选择器将选择（查找）我页面中的所有 p 标签，并设置字体大小等于 30px 的样式

类选择器

如果我们不想设置所有 p 标签的样式，而只想设置其中一个或多个。我们可以设置一些带有分组类名的 p 标签

1
2
3
<p class="title">This is a Title</p>
<p class="title">This is also a Title</p>
<p>This is a regular paragraph</p>

然后我们可以使用类选择器来仅选择具有标题类名的类。类选择器以点为前缀

1
2
3
.title {
    font-size: 30px;
}

id 选择器

如果我们只想设置一个 p 标签的样式，我们可以使用 id 属性进行唯一选择

1
2
3
<p id="main-title">This is a Title</p>
<p id="second-title">This is also a Title</p>
<p>This is a regular paragraph</p>

然后我们可以使用 id 选择器来仅选择 id 等于选择器名称的那个。id 选择器以 # 为前缀

1
2
3
#main-title {
    font-size: 30px;
}

通用选择器

通用选择器 (*) 选择页面上的所有 HTML 元素。

1
2
3
4
* {
    text-align: center;
    color: blue;
}

后代组合器

如果可以选择与选择器名称对应的父代和子代

1
2
3
4
table h2 {
    text-align: center;
    color: red;
}

此代码选择所有 h2 元素，但仅选择具有父表元素的子元素。

级联样式表

CSS 代表级联样式表，第一个单词级联对于理解级联的行为方式非常重要。

样式表级联从非常简单的层面上讲，这意味着 CSS 规则的顺序很重要；当两个具有相同特异性的规则适用时，CSS 中最后一个规则将被使用。

1
2
3
4
5
6
7
h1 {
    font-size: 30px;
}

h1 {
    font-size: 24px;
}

字体大小为 24px

继承

这里还有一个很重要的概念，即某些 CSS 属性默认继承当前元素父元素上设置的值，而有些则不继承。这也可能导致一些你可能意想不到的行为。

例如，此 CSS 将更改 body 和所有子元素的 body 元素

1
2
3
body {
    color: red;
}

由于 CSS 继承，标签的所有子元素的样式都与其父元素相同。

如果子属性具有专门为其设计的特定样式。该样式将占主导地位。因此，只有没有样式的元素才会继承其父元素的属性和值。

1
2
3
4
5
6
body {
    color: red;
}
p {
    color: black;
}

因此，在最后一个示例中，所有正文文本都将为红色，但 p 标签文本除外

特异性

特异性是指浏览器在多条规则具有不同的选择器但仍可应用于同一元素时决定应用哪条规则的方式。

这里的一般规则是更具体的选择器优先于不太具体的选择器

1
2
3
4
5
6
7
8
9
10
11
body table {
    color: blue;
}

body {
    color: red;
}

table {
    color: green;
}

在这种情况下，表格文本颜色将为蓝色。因为它是更具体的选择器。此外，如果 CSS 直接附加到 html 标签，它将比其他任何东西都占主导地位。

1
2
3
4
5
<table>
    <tr>
        <td style="color: magenta;">Test</td>
    </tr>
</table>

最后，我想向你推荐一款小型 CSS 选择器游戏来练习你的新技能。这个有趣的游戏叫做 CSS Dinner：https://flukeout.github.io/

相关文章：

WilliamWeb Full Stack developer

致力于网站建设与Web开发。喜欢新事物，关注前后端动态，对新的技术有追求， 做一个优秀的web全栈工程师。