CSS 选择器


目录

    显示目录


CSS 选择器选择您需要的 HTML 元素 想要风格。


CSS 选择器

CSS 选择器用于“查找”(或选择)您想要的 HTML 元素 想要风格。

我们可以将 CSS 选择器分为五类:

  • 简单选择器(根据名称、id、类选择元素)

  • 组合器选择器(选择 元素基于它们之间的特定关系)

  • 伪类选择器(根据某种状态选择元素)

  • 伪元素选择器(select 并设置元素的一部分的样式)

  • 属性选择器(根据选择元素 属性或属性值)

本页将解释最基本的 CSS 选择器。


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>



CSS id 选择器

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 名称不能以数字开头!



CSS 类选择器

类选择器选择具有特定类属性的 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>


注意:类名不能以数字开头!


CSS 通用选择器

通用选择器 (*) 选择所有 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>



CSS 分组选择器

分组选择器选择所有具有相同样式的 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>




所有 CSS 简单选择器

选择器:

#id

示例:

#firstname

示例描述:选择 id="firstname" 的元素


选择器:

.class

示例:

.intro

示例描述:选择所有带有 class="intro" 的元素


选择器:

element.class

示例:

p.intro

示例描述:仅选择 class="intro" 的 <p> 元素


选择器:

*

示例:

*

示例描述:选择所有元素


选择器:

element

示例:

p

示例描述:选择所有 <p> 元素


选择器:

element,element,..

示例:

div, p

示例描述:选择所有 <div> 元素和所有 <p> 元素