当前位置：首页 > news >正文

05_css选择器的使用

news 2025/7/12 17:39:34

一、css选择器的类型

1、标签选择器

用法：直接写 写标签名：标签名{}

示例：

<!-- <!DOCTYPE html -->
<html><head><meta charset="utf-8"><title>标签选择器</title><style type="text/css">div {text-align: center;width: 600px;height: 400px;color: blue;background: blanchedalmond;}</style></head><body><!-- 标签名是：div --><div>使用标签选择器添加样式</div></body>
</html>

2、id选择器

用法：元素的id属性：#id名{}

示例：

<!-- <!DOCTYPE html -->
<html><head><meta charset="utf-8"><title>id选择器</title><style type="text/css">#type {text-align: center;width: 600px;height: 400px;color: blue;background: blanchedalmond;}</style></head><body><!-- id名是：type --><div id="type">使用id选择器添加样式</div></body>
</html>

3、类选择器

用法：元素的class属性 .class 值{}
(类选择器是使用最多的一种方式)

示例：

<!-- <!DOCTYPE html -->
<html><head><meta charset="utf-8"><title>class选择器</title><style type="text/css">.type {text-align: center;width: 600px;height: 400px;color: blue;background: blanchedalmond;}</style></head><body><!-- class名是：type --><div class="type">使用class选择器添加样式</div></body>
</html>

4、层级选择器

用法：按照层级找到对应需要添加化样式的元素名

示例：

<!-- <!DOCTYPE html -->
<html><head><meta charset="utf-8"><title>层级选择器</title><style type="text/css">div b span {text-align: center;width: 600px;height: 400px;color: blue;background: blanchedalmond;}</style></head><body><!-- 选择span标签的内容 --><div ><b>这时候div标签下面的b标签的内容,<span>这时候div标签下面的b标签下面的span的内容</span>新的内容</b></div></body>
</html>

5、组选择器

用法：多个元素名，统一使用一个样式

示例：

<!-- <!DOCTYPE html -->
<html><head><meta charset="utf-8"><title>组选择器</title><style type="text/css">h1,h2,h3 {color: blue;}</style></head><body><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3></body>
</html>