css的ID选择器和class选择器的区别

最新推荐文章于 2024-05-18 20:51:36 发布

二次程序猿

最新推荐文章于 2024-05-18 20:51:36 发布

阅读量9k

点赞数 10

文章标签： css html

本文链接：https://blog.csdn.net/qq_42121620/article/details/114234289

版权

CSS的ID选择器和class选择器

一、ID选择器和Class选择器的区别

1、一个HTML标签只能应用于一个ID选择器
2、一个HTML标签可以应用多个class选择器
3、ID选择器是以“#”开头，并且只能在单个元素使用
4、Class选择器是以“.”开头，可以多个元素应用，中间用“，”隔开

二、

1.ID选择器

代码如下（示例）：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>ID选择器(runoob.com)</title> 
<style>
#para1
{
	text-align:center;
	color:red;
} 
</style>
</head>

<body>
<p id="para1">Hello World!</p>
<p>这个段落不受该样式的影响。</p>
</body>
</html>

在这里插入图片描述

2.class选择器

代码如下（示例）：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>class选择器</title>
<style>

.center
{
	text-align:center;
}
</style>
</head>

<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p> 
</body>
</html>

在这里插入图片描述

3、可以特指某个元素使用class，其他元素不受影响

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>class选择器</title>
<style>

p.center
{
    text-align:center;
}
</style>
</head>

<body>
<h1 class="center">这个标题不受影响</h1>
<p class="center">这个段落居中对齐。</p> 
</body>
</html>

在这里插入图片描述

总结

日常使用选择器时经量使用class，可以有效减少重复的代码，提高效率。

二次程序猿

关注

10
点赞
踩
29

收藏

觉得还不错? 一键收藏
2
评论
css的ID选择器和class选择器的区别

CSS的ID选择器和class选择器一、ID选择器和Class选择器的区别1、一个HTML标签只能应用于一个ID选择器2、一个HTML标签可以应用多个class选择器3、ID选择器是以“#”开头，并且只能在单个元素使用4、Class选择器是以“.”开头，可以多个元素应用，中间用“，”隔开二、1.ID选择器代码如下（示例）：<!DOCTYPE html><html><head><meta charset="utf-8"> <tit
复制链接

扫一扫