CSS Id和Class

最新推荐文章于 2023-09-18 15:35:01 发布

冷月醉雪

最新推荐文章于 2023-09-18 15:35:01 发布

阅读量435

点赞数 1

分类专栏： CSS 文章标签： CSS ID class

本文链接：https://blog.csdn.net/lengyuezuixue/article/details/80272110

版权

CSS 专栏收录该内容

53 篇文章 1 订阅

订阅专栏

如果你要在HTML元素中设置CSS样式，你需要在元素中设置"id" 和 "class"选择器。

id 选择器

id选择器可以为标有特定 id 的HTML元素指定特定的样式。

HTML元素以id属性来设置id 选择器，css中 id 选择器以 "#" 来定义。

以下的样式规则应用于元素属性id="para1"：

<!DOCTYPE html>
<html>  
<head>  
    <meta charset="utf-8">  
    <title>自学教程(如约智惠.com)</title>  
	<style>
		#para1 {
		color: red;
		text-align:center;
	}
	</style>
	
</head>  
<body>  
    <p id="para1">Hello World!</p>
	<p>这个段落不受该样式影响。</p>
</body>  
</html>

ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

class 选择器

class 选择器用于描述一组元素的样式，class选择器有别于id选择器，class可以在多个元素中使用。

class选择器在HTML中以class属性表示，在CSS中，类选择器以一个点"."号显示。

以下的例子，所有拥有center类的HTML元素均为居中。

<!DOCTYPE html>
<html>  
<head>  
    <meta charset="utf-8">  
    <title>自学教程(如约智惠.com)</title>  
	<style>
		.center {
		color: red;
		text-align:center;
	}
	</style>
	
</head>  
<body>  
    <p id="para1" class="center">Hello World!</p>
	<p class="center">这个段落不受该样式影响。</p>
</body>  
</html>

你也可以指定特定的HTML元素使用class。

在以下实例中, 所有的 p 元素使用 class="center" 让该元素的文本居中:

<!DOCTYPE html>
<html>  
<head>  
    <meta charset="utf-8">  
    <title>自学教程(如约智惠.com)</title>  
	<style>
		p.center {
		color: red;
		text-align:center;
	}
	</style>
	
</head>  
<body>  
    <h1 id="para1" class="center">这个标题不受影响</h1>
	<p class="center">这个段落居中对齐。</p>
</body>  
</html>

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

参考：

https://www.yuque.com/docs/share/168e870a-ea3f-489d-866a-596ea12f89db

冷月醉雪

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS Id和Class

如果你要在HTML元素中设置CSS样式，你需要在元素中设置"id" 和 "class"选择器。id 选择器 id选择器可以为标有特定 id 的HTML元素指定特定的样式。 HTML元素以id属性来设置id 选择器，css中 id 选择器以 "#" 来定义。以下的样式规则应用于元素属性id="para1"：&lt;!DOCTYPE html&gt;&lt;...
复制链接

扫一扫