CSS 选择器选择您需要的 HTML 元素 想要风格。
CSS 选择器用于“查找”(或选择)您想要的 HTML 元素 想要风格。
我们可以将 CSS 选择器分为五类:
简单选择器(根据名称、id、类选择元素)
组合器选择器(选择 元素基于它们之间的特定关系)
伪类选择器(根据某种状态选择元素)
伪元素选择器(select 并设置元素的一部分的样式)
属性选择器(根据选择元素 属性或属性值)
本页将解释最基本的 CSS 选择器。
元素选择器根据元素名称选择 HTML 元素。
在这里,页面上的所有 <p> 元素都将是 居中对齐,文本颜色为红色:
p
{
text-align: center;
color: red;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
id 选择器使用 HTML 元素的 id 属性来选择特定元素。
元素的 id 在页面内是唯一的,因此 id 选择器是 习惯于 选择一个独特的元素!
要选择具有特定 id 的元素,请写入井号 (#) 字符,后跟 元素的 id。
下面的 CSS 规则将应用于 id="para1" 的 HTML 元素:
#para1
{
text-align: center;
color: red;
}
自己尝试一下→
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
注意: ID 名称不能以数字开头!
类选择器选择具有特定类属性的 HTML 元素。
要选择具有特定类的元素,请写入句点 (.) 字符,后跟 班级名称。
在此示例中,所有带有 class="center" 的 HTML 元素都将是红色且居中对齐:
.center {
text-align: center;
color: red;
}
自己尝试一下→
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>
您还可以指定类只影响特定的 HTML 元素。
在此示例中,只有 class="center" 的 <p> 元素将被 红色且居中对齐:
p.center {
text-align: center;
color: red;
}
自己尝试一下→
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
</body>
</html>
HTML 元素 也可以指多个类。
在此示例中,<p> 元素将根据 class="center" 设置样式 和类=“大”:
<p class="center large">This paragraph refers to two classes.</p>
自己尝试一下→
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
p.large {
font-size: 300%;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
<p class="center large">This paragraph will be red, center-aligned, and in a large font-size.</p>
</body>
</html>
注意:类名不能以数字开头!
通用选择器 (*) 选择所有 HTML 页面上的元素。
下面的 CSS 规则将影响页面上的每个 HTML 元素:
*
{
text-align: center;
color: blue;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<style>
* {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Every element on the page will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
分组选择器选择所有具有相同样式的 HTML 元素 定义。
看下面的 CSS 代码(h1、h2 和 p 元素具有相同的 样式定义):
h1
{
text-align: center;
color: red;
}
h2
{
text-align: center;
color: red;
}
p
{
text-align: center;
color: red;
}
最好将选择器分组,以最小化代码。
要将选择器分组,请用逗号分隔每个选择器。
在此示例中,我们对上面代码中的选择器进行了分组:
h1, h2, p
{
text-align: center;
color: red;
}
自己尝试一下→
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>
选择器:
#id
示例:
#firstname
示例描述:选择 id="firstname" 的元素
选择器:
.class
示例:
.intro
示例描述:选择所有带有 class="intro" 的元素
选择器:
element.class
示例:
p.intro
示例描述:仅选择 class="intro" 的 <p> 元素
选择器:
*
示例:
*
示例描述:选择所有元素
选择器:
element
示例:
p
示例描述:选择所有 <p> 元素
选择器:
element,element,..
示例:
div, p
示例描述:选择所有 <div> 元素和所有 <p> 元素