007_CSS ID选择器

最新推荐文章于 2024-09-29 18:44:00 发布

原创最新推荐文章于 2024-09-29 18:44:00 发布 · 120 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #web前端

css学习专栏收录该内容

52 篇文章

订阅专栏

本文介绍了CSS ID选择器的使用方法，包括其语法（#号标识符、独特性与通配符）、区别于类选择器的特点（唯一性、ID列表限制及应用场景），并通过实例展示了如何设置样式。

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

2. 语法

2.1. 首先, ID选择器前面有一个#号, 也称为棋盘号或井号。

2.2. 请看下面的规则:

*#intro {
    font-weight: bold;
}

2.3. 与类选择器一样, ID选择器中可以忽略通配选择器。前面的例子也可以写作:

#intro {
    font-weight: bold;
}

2.4. 例子

2.4.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>CSS ID选择器</title>
		<meta charset="utf-8" />
		<style type="text/css">
			#intro {
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<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>
	</body>
</html>

2.4.2. 效果图

3. 类选择器还是ID选择器?

3.1. 区别1: 只能在文档中使用一次

与类不同, 在一个html文档中, ID选择器会使用一次, 而且仅一次。

3.2. 区别2: 不能使用ID词列表

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

3.3. 区别3: ID能包含更多含义

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

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

4. 区分大小写

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

4.2. 因此, 对于以下的css和html, 元素不会变成粗体:

#intro {
    font-weight: bold;
}

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