700字范文 > CSS——id 和 class 选择器

CSS——id 和 class 选择器

时间：2020-06-24 02:08:04

相关推荐

CSS——id 和 class 选择器

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>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。