一、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>
