CSS学习之id、class、属性选择器

最新推荐文章于 2025-07-17 22:33:31 发布

花果山来的和尚

最新推荐文章于 2025-07-17 22:33:31 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/amrenyu/article/details/80997747

CSS 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了CSS中的id选择器、类选择器和属性选择器的使用方法。id选择器通过#标识，用于唯一标识一个元素；类选择器使用.，可以多次应用于不同元素。属性选择器则可以根据元素的属性和值来设定样式，包括只选择属性、选择属性和值以及处理多个值和多个属性的情况。文章强调了ID选择器的唯一性，类选择器的复用性，以及属性选择器的灵活性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、CSS id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 “#” 来定义，也称为棋盘号或井号。

*#intro {font-weight:bold;}

下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：

<html>
<head>
<style type="text/css">
#red {color:red;}
#green {color:green;}
</style>
</head>
<body>
<p>下面的 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。</p>
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>
</body>
</html>

注意：id 属性只能在每个 HTML 文档中出现一次。

id 选择器和派生选择器

在现代布局中，id 选择器常常用于建立派生选择器。

#sidebar p {
    font-style: italic;
    text-align: right;
    margin-top: 0.5em;
    }

上面的样式只会应用于出现在 id 是 sidebar 的元素内的段落。这个元素很可能是 div 或者是表格单元，尽管它也可能是一个表格或者其他块级元素。它甚至可以是一个内联元素，比如 或者 ，不过这样的用法是非法的，因为不可以在内联元素  中嵌入。

一个选择器，多种用法
即使被标注为 sidebar 的元素只能在文档中出现一次，这个 id 选择器作为派生选择器也可以被使用很多次：

#sidebar p {
    font-style: italic;
    text-align: right;
    margin-top: 0.5em;
    }

#sidebar h2 {
    font-size: 1em;
    font-weight: normal;
    font-style: italic;
    margin: 0;
    line-height: 1.5;
    text-align: right;
    }

在这里，与页面中的其他 p 元素明显不同的是，sidebar 内的 p 元素得到了特殊的处理，同时，与页面中其他所有 h2 元素明显不同的是，sidebar 中的 h2 元素也得到了不同的特殊处理。

单独的选择器id 选择器即使不被用来创建派生选择器，它也可以独立发挥作用：

#sidebar {
    border: 1px dotted #000;
    padding: 10px;
    }

根据这条规则，id为sidebar的元素将拥有一个像素宽的黑色点状边框，同时其周围会有 10 个像素宽的内边距（padding，内部空白）。
老版本的 Windows/IE 浏览器可能会忽略这条规则，除非你特别地定义这个选择器所属的元素：

div#sidebar {
    border: 1px dotted #000;
    padding: 10px;
    }

ID 选择器允许以一种独立于文档元素的方式来指定样式。

在某些方面，ID 选择器类似于类选择器，不过也有一些重要差别。

语法

1、与类选择器一样，ID 选择器中可以忽略通配选择器。

*#intro {font-weight:bold;}
#intro {font-weight:bold;}

这两个选择器的效果将是一样的。

2、 ID 选择器不引用 class 属性的值，毫无疑问，它要引用 id 属性中的值。

以下是一个实际 ID 选择器的例子：

<p id="intro">This is a paragraph of introduction.</p>

完整代码如下：

<html>
<head>
<style type="text/css">
#intro {font-weight:bold;}
#d {color:green;}
</style>
</head>

<body>
<div id="d">
<p id="intro">This is a paragraph of introduction.</p>

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

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

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

<p>...</p>
</div>
</body>
</html>

应该选择类选择器还是 ID 选择器？

在类选择器这一章中我们曾讲解过，可以为任意多个元素指定类。

区别 1：只能在文档中使用一次
与类不同，在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次。

区别 2：不能使用 ID 词列表
不同于类选择器，ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。

区别 3：ID 能包含更多含义
类似于类，可以独立于元素来选择 ID。有些情况下，您知道文档中会出现某个特定 ID 值，但是并不知道它会出现在哪个元素上，所以您想声明独立的 ID 选择器。
例如，您可能知道在一个给定的文档中会有一个 ID 值为 mostImportant 的元素。您不知道这个最重要的东西是一个段落、一个短语、一个列表项还是一个小节标题。您只知道每个文档都会有这么一个最重要的内容，它可能在任何元素中，而且只能出现一个。

在这种情况下，可以编写如下规则：

#mostImportant {color:red; background:yellow;}

这个规则会与以下各个元素匹配（这些元素不能在同一个文档中同时出现，因为它们都有相同的 ID 值）：

<h1 id="mostImportant">This is important!</h1>
<em id="mostImportant">This is important!</em>
<ul id="mostImportant">This is important!</ul>

区分大小写

请注意，类选择器和 ID 选择器可能是区分大小写的。这取决于文档的语言。HTML 和 XHTML 将类和 ID 值定义为区分大小写，所以类和 ID 值的大小写必须与文档中的相应值匹配。

因此，对于以下的 CSS 和 HTML，元素不会变成粗体：

#intro {font-weight:bold;}

<p id="Intro">This is a paragraph of introduction.</p>

由于字母 i 的大小写不同，所以选择器不会匹配上面的元素。

2.CSS 类选择器

在 CSS 中，类选择器以一个点号显示：

.center {text-align: center}

在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。

在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 “.center” 选择器中的规则。

<h1 class="center">
This heading will be center-aligned
</h1>

<p class="center">
This paragraph will also be center-aligned.
</p>

注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

和 id 一样，class 也可被用作派生选择器：

.fancy td {
    color: #f60;
    background: #666;
    }

在上面这个例子中，类名为 fancy 的更大的元素内部的表格单元都会以灰色背景显示橙色文字。（名为 fancy 的更大的元素可能是一个表格或者一个 div）。

元素也可以基于它们的类而被选择：

td.fancy {
    color: #f60;
    background: #666;
    }

在上面的例子中，类名为 fancy 的表格单元将是带有灰色背景的橙色。

<td class="fancy">

你可以将类 fancy 分配给任何一个表格元素任意多的次数。那些以 fancy 标注的单元格都会是带有灰色背景的橙色。

那些没有被分配名为 fancy 的类的单元格不会受这条规则的影响。
还有一点值得注意，class 为 fancy 的段落也不会是带有灰色背景的橙色，当然，任何其他被标注为 fancy 的元素也不会受这条规则的影响。
这都是由于我们书写这条规则的方式，这个效果被限制于被标注为 fancy 的表格单元（即使用 td 元素来选择 fancy 类）。

类选择器允许以一种独立于文档元素的方式来指定样式。

该选择器可以单独使用，也可以与其他元素结合使用。

提示：只有适当地标记文档后，才能使用这些选择器，所以使用这两种选择器通常需要先做一些构想和计划。

要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。

在使用类选择器之前，需要修改具体的文档标记，以便类选择器正常工作。

为了将类选择器的样式与元素关联，必须将 class 指定为一个适当的值。请看下面的 HTML 代码：

<h1 class="important">
This heading is very important.
</h1>

<p class="important">
This paragraph is very important.
</p>

在上面的代码中，两个元素的 class 都指定为 important：第一个标题（ h1 元素），第二个段落（p 元素）。

然后我们使用以下语法向这些归类的元素应用样式，即类名前有一个点号（.），然后结合通配选择器：

*.important {color:red;}

如果您只想选择所有类名相同的元素，可以在类选择器中忽略通配选择器，这没有任何不好的影响：

.important {color:red;}

举例

<html>
<head>
<style type="text/css">
.important {color:red;}
</style>
</head>

<body>
<h1 class="important">This heading is very important.</h1>
<p class="important">This paragraph is very important.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>...</p>
</body>
</html>

类选择器可以结合元素选择器来使用。

例如，您可能希望只有段落显示为红色文本：

p.important {color:red;}

选择器现在会匹配 class 属性包含 important 的所有 p 元素，但是其他任何类型的元素都不匹配，不论是否有此 class 属性。选择器 p.important 解释为：“其 class 属性值为 important 的所有段落”。因为 h1 元素不是段落，这个规则的选择器与之不匹配，因此 h1 元素不会变成红色文本。

如果你确实希望为 h1 元素指定不同的样式，可以使用选择器 h1.important：

p.important {color:red;}
h1.important {color:blue;}

完整代码：

<html>
<head>
<style type="text/css">
p.important {color:red;}
h1.important {color:blue;}
</style>
</head>

<body>
<h1 class="important">This heading is very important.</h1>
<p class="important">This paragraph is very important.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>...</p>
</body>
</html>

CSS 多类选择器

前面说了 class 值中包含一个词的情况。在 HTML 中，一个 class 值中可能包含一个词列表，各个词之间用空格分隔。例如，如果希望将一个特定的元素同时标记为重要（important）和警告（warning），就可以写作：

<p class="important warning">
This paragraph is a very important warning.
</p>

这两个词的顺序无关紧要，写成 warning important 也可以。
我们假设 class 为 important 的所有元素都是粗体，而 class 为 warning 的所有元素为斜体，class 中同时包含 important 和 warning 的所有元素还有一个银色的背景。就可以写作：

.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}

完整代码：

<html>
<head>
<style type="text/css">
.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}
</style>
</head>

<body>
<p class="important">This paragraph is very important.</p>
<p class="warning">This is a warning.</p>
<p class="important warning">This paragraph is a very important warning.</p>
<p>This is a paragraph.</p>
<p>...</p>
</body>
</html>

通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）。
如果一个多类选择器包含类名列表中没有的一个类名，匹配就会失败。请看下面的规则：

.important.urgent {background:silver;}

不出所料，这个选择器将只匹配 class 属性中包含词 important 和 urgent 的 p 元素。
因此，如果一个 p 元素的 class 属性中只有词 important 和 warning，将不能匹配。不过，它能匹配以下元素：

<p class="important urgent warning">
This paragraph is a very important and urgent warning.
</p>

完整代码：

<html>
<head>
<style type="text/css">
.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}
</style>
</head>

<body>
<p class="important">This paragraph is very important.</p>
<p class="warning">This is a warning.</p>
<p class="important urgent warning">This paragraph is a very important warning.</p>
<p>This is a paragraph.</p>
<p>...</p>
</body>
</html>

提示：在 IE7 以下的版本不支持多类选择器。

3、CSS 属性选择器

除了class和id属性外，还可以给其他指定属性的HTML元素设置样式。
注意：IE6以下不支持属性选择。IE8及IE7只有在规定了<!DOCTYPE>时才支持属性选择器。

1、只选择属性来设置样式

我们可以只选择属性来设置样式，即只要满足了包含该指定属性的元素，就能应用到样式，不管该属性的值是什么。

例：为带有title属性的元素设置样式

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
[title]
{
    color:red;
}
</style>
</head>

<body>
<h1>下面的会应用到样式</h1>
<h2 title="news">今日新闻播报</h2>
<a title="knowledge" href="https://www.cnblogs.com/yoyocountry/p/9147762.html">
自动化测试如何入门</a>
<br />
<hr />
<h1>下面的无法应用到样式</h1>
<h2>今日新闻播报</h2>
<a href="https://www.cnblogs.com/yoyocountry/p/9147762.html">自动化测试如何入门</a>
</body>
</html>

如果要读所有的<href>属性的锚应用样式，可以使用以下样式：

a[href] {color:blue;}

2、选择属性和值来设置样式

通过选择属性和对应的值来设置样式。只有在满足了拥有该属性和对应的值时才会应用到样式。

例：为title=”huaguoshan”的所有元素设置样式

<!doctype html>
<html>
<head>
<style type="text/css">
[title="huaguoshan"]
{
    color:green;
}
</style>
</head>

<body>
<h1>下面的会应用到样式</h1>
<h2 title="huaguoshan">今日新闻播报</h2>
<a title="huaguoshan" href="https://www.cnblogs.com/yoyocountry/p/9147762.html">
自动化测试如何入门</a>
<br />
<hr />
<h1>下面的无法应用到样式</h1>
<h2 title="news">今日新闻播报</h2>
<a class="huaguoshan" href="https://www.cnblogs.com/yoyocountry/p/9147762.html">
自动化测试如何入门</a>
</body>
</html>

3、当属性里包含多个值时

利用上面的选择器需要属性和值完全匹配才能成功应用样式，但是当某属性里包含了多个值时，上述方法就不太方便。
我们可以为包含指定值的属性的所有元素设置样式。

下面例子里的方法(~=)适用于由空格分割的属性值。

例：为title属性里包含了hello的所有元素设置样式

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
[title~=hello]
{color:orange;}
</style>
</head>

<body>
<h1>下面的会应用到样式</h1>
<h2 title="hello world">hello world!</h2>
<p title="boy hello">boy,how are you?</p>
<br />
<hr />
<h1>下面的不会应用到样式</h1>
<h2 title="world">hello world!</h2>
<p title="boy">boy,how are you?</p>
</body>
</html>

4、当元素里包含多个属性时

比如需要对同时拥有href和title属性的文本设置样式，可以将属性选择器链接在一起。

a[href][title]{color:red;}

这表示该样式只对既有title又有href的元素起作用。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
a[href][title]
{color:red;}
</style>
</head>

<body>
<h1>下面的会应用到样式</h1>
<a title="css" href="https://blog.youkuaiyun.com/amrenyu/article/details/80880961">如何学习css</a>
<br />
<hr />
<h1>下面的不会应用到样式</h1>
<a  href="https://blog.youkuaiyun.com/amrenyu/article/details/80880961">如何学习css</a>
</body>
</html>

5、为不带有class或id的表单设置样式

<!DOCTYPE HTML>
<html>
<head>
<style>
input[type="text"]
{
  width:150px;
  display:block;               <!--设置换行，block是换行的效果-->
  margin-bottom:10px;
  background-color:#234458;    <!--输入框的颜色-->
  border:1px solid #2f556b;    <!--输入框的边框的颜色-->
  color:white;                 <!--字体的颜色-->
  font-family: Verdana, Arial; <!--字体-->
}

input[type="button"]
{
  width:120px;
  margin-left:35px;
  display:block;
  color:white;
  background-color:#286695;
  font-family: Verdana, Arial;
}
</style>
</head>
<body>

<form name="input" action="" method="get">
<input type="text" name="name" size="20">
<input type="text" name="sex" size="20">
<input type="button" value="提交">
</form>
</body>
</html>

部分值属性选择器与点号类名记法的区别

该选择器等价于我们在类选择器中讨论过的点号类名记法。

也就是说，p.important和p[class="important"]应用到 HTML 文档时是等价的。

那么，为什么还要有"~=" 属性选择器呢？因为它能用于任何属性，而不只是 class。

6、子串匹配属性选择器

类型	描述
[abc^=”def”]	选择 abc 属性值以 “def” 开头的所有元素
[abc$=”def”]	选择 abc 属性值以 “def” 结尾的所有元素
[abc*=”def”]	选择 abc 属性值中包含子串 “def” 的所有元素

任何属性都可以使用这些选择器。

此外还有很多适用其他类型的选择器。

选择器	描述
[attribute]	用于选取带有指定属性的元素。
[attribute=value]	用于选取带有指定属性和值的元素。
[attribute~=value]	用于选取属性值中包含指定词汇的元素。
[attribute｜=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词（-连接符合也不影响）。
[attribute^=value]	匹配属性值以指定值开头的每个元素。
[attribute$=value]	匹配属性值以指定值结尾的每个元素。
[attribute*=value]	匹配属性值中包含指定值的每个元素。