CSS Id选择器和Class选择器
程序员文章站
2024-03-26 09:44:29
...
CSS Id选择器和Class选择器
Id选择器
id选择器可以为标有特定id的HTML元素指定特定的样式。
Html元素以id属性来设置id选择器，CSS中id选择器以“#”来定义。
以下样式规则应用于元素属性id="para1"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#para1
{
text-align:center;
color:red;
}
</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">
<style>
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p>
</body>
</html>效果图如下所示:
同时你也可以指定特定的 HTML元素使用Class。
在以下实例中，所有的p元素使用class=“center”让该元素的文本居中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">这个标题不受影响</h1>
<p class="center">这个段落居中对齐。</p>
</body>
</html>效果图如下所示：
上一篇： vue的一些坑
下一篇： Python高阶函数：sorted
推荐阅读
-
CSS Id选择器和Class选择器
-
css的ID选择器和class选择器的区别
-
CSS3属性选择器详解 及 双色球实战开发 博客分类： css3 css3属性选择器元素选择器双色球实战开发
-
CSS选择器的优化 博客分类： css3div+css csscss3选择器优化
-
CSS3属性选择器详解 博客分类： css3div+css csscss3属性选择器
-
CSS3基本选择器详解 csscss3基本选择器
-
CSS3基本选择器详解 csscss3基本选择器
-
CSS3伪类选择器详解 博客分类： div+csscss3 csscss3伪类选择器
-
CSS中选择器优先级顺序实战讲解 博客分类： css3 css3css选择器优先级选择器优先级
-
CSS3伪类选择器详解 博客分类： div+csscss3 csscss3伪类选择器