007_CSS ID选择器

最新推荐文章于 2023-06-22 15:09:42 发布

自由与束缚JavaJavaScript

最新推荐文章于 2023-06-22 15:09:42 发布

阅读量81

点赞数

分类专栏： css学习文章标签： css web前端

本文链接：https://blog.csdn.net/aihiao/article/details/109062712

版权

css学习专栏收录该内容

52 篇文章 0 订阅

订阅专栏

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>

自由与束缚JavaJavaScript

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
007_CSS ID选择器

1. ID选择器允许以一种独立于文档元素的方式来指定样式。2. 语法2.1. 首先, ID选择器前面有一个#号 - 也称为棋盘号或井号。2.2. 请看下面的规则:*#intro {font-weight:bold;}2.3. 与类选择器一样, ID选择器中可以忽略通配选择器。前面的例子也可以写作:#intro {font-weight:bold;}2.4. 实例<!DOCTYPE html><html> <head> <
复制链接

扫一扫

专栏目录