CSS——id 和 class 选择器

来源：互联网发布：高中知识软件编辑：程序博客网时间：2024/05/22 10:31

id 选择器

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
代码实例：

<!DOCTYPE html><html><head><meta charset="utf-8"> <title>再见二逼K</title> <style>#para1{    text-align:center;    color:red;} </style></head><body><p id="para1">Hello World!</p><p>这个段落不受该样式的影响。</p></body></html>

结果：
这里写图片描述

text-align注：
left 把文本排列到左边。默认值：由浏览器决定。
right 把文本排列到右边。
center 把文本排列到中间。
justify 实现两端对齐文本效果。
inherit 规定应该从父元素继承 text-align 属性的值。

class 选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点”.”号显示

代码示例1：

<!DOCTYPE html><html><head><meta charset="utf-8"> <title>再见二逼K</title> <style>.center{    text-align:center;}</style></head><body><h1 class="center">标题居中</h1><p class="center">段落居中。</p> </body></html>

这里写图片描述

代码示例2：

<!DOCTYPE html><html><head><meta charset="utf-8"> <title>再见二逼K</title> <style>p.center{    text-align:center;}</style></head><body><h1 class="center">这个标题不受影响</h1><p class="center">这个段落居中对齐。</p> </body></html>

这里写图片描述

0 0