CSS 的 ID 和 Class 有什么区别?如何正确使用它们?

 我来答
碎片知识杂货铺
2016-04-15 · 碎片知识杂货铺,仅供参考
碎片知识杂货铺
采纳数:458 获赞数:4216

向TA提问 私信TA
展开全部

在样式表定义一个样式的时候,可以定义id也可以定义class。

  一、CSS 类选择器 class

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

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

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

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

3. 语法使用以下语法向这些归类的元素应用样式,即类名前有一个点号(.),然后结合通配选择器:

*.important {color:red;}


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

.important {color:red;}

结合元素选择器


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


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

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;}


5.重要事项:在 IE7 之前的版本中,不同平台的 Internet Explorer 都不能正确地处理多类选择器。


二、CSS ID 选择器:

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

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

3.语法


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

请看下面的规则:

*#intro {font-weight:bold;}

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

#intro {font-weight:bold;}

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

第二个区别是 ID 选择器不引用 class 属性的值,毫无疑问,它要引用 id 属性中的值。

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

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


三、类选择器还是 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 的大小写不同,所以选择器不会匹配上面的元素。

摘自:http://www.w3school.com.cn/css/css_selector_class.asp

稳固且帅气灬国宝2534
2016-04-12 · 超过70用户采纳过TA的回答
知道答主
回答量:187
采纳率:100%
帮助的人:152万
展开全部
所有的猫都有尾巴,这就是 class;你家的花花尾巴是黄黑杂色的,“花花”就是id。
—----------------------------
你有一个网页,上面3个按钮,要让它们高宽相同,就用 class;其中的“提交”按钮的背景更亮,就用id来指定css。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式