一、id 选择器
d 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML 元素以 id 属性来设置 id 选择器,CSS 中 id 选择器以 "#" 来定义
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #cdiv{ color :black; background-color: rgb(252, 55, 0); text-align: center; } </style></head><body> <p id = "cdiv">这段文字的背景颜色为红色,并且在中间显示</p> <p>这段文字正常显示</p></body></html>
复制代码
输出结果如下：
注意:id 选择器不能以数字开头，原因是在部分浏览器上会引起错误。
二、class 选择器
class 选择器用于描述一组元素的样式，class 选择器有别于 id 选择器，class 可以在多个元素中使用。
class 选择器在 HTML 中以 class 属性表示, 在 CSS 中，类选择器以一个点 . 号显示：
例如
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .cdiv{ text-align: center; background-color: brown; } </style></head><body> <h1 class = "cdiv">标题居中</h1></body></html>
复制代码
输出如下
在 class 中也可以指定特定的元素样式，例如可以使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> p.cdiv{ text-align : center; background-color : brown; } </style></head><body> <h1 class = "cdiv">这行不受影响</h1> <p class="cdiv">这行受到影响</p></body></html>
复制代码
输出如下
三、 多个选择器可以使用空格隔开
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .cdiv{ text-align : center; background-color : brown; } .ddiv{ color :yellow; } </style></head><body> <p class="cdiv ddiv">11111111</p></body></html>
复制代码
评论