css的ID选择器和class选择器的区别
程序员文章站
2024-03-26 09:35:35
...
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，可以有效减少重复的代码，提高效率。
推荐阅读
-
css的ID选择器和class选择器的区别
-
CSS选择器的优化 博客分类： css3div+css csscss3选择器优化
-
CSS动画：animation、transition、transform、translate 的区别和联系
-
三种css选择器的单独和联合作战 博客分类： css基础 htmlcss
-
三种css选择器的单独和联合作战 博客分类： css基础 htmlcss
-
java中Class.getMethods()和Class.getDeclaredMethods()方法的区别
-
Android中颜色选择器和改变字体颜色的实例教程
-
Android中颜色选择器和改变字体颜色的实例教程
-
IE和FIREFOX下CSS的区别与解决方法第1/2页
-
div+css中Class与ID的区别