组合选择器
目录
交集选择器
语法结构
选择器1选择器2...{
属性:值;
}
- 选择器之间没有任何的连接符号
- 选择器使用任意的选择器
将仅带有class的p标签变色
- 示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "utf-8">
<meta name="viewport"content="width=device0-width,initial-scale=1.0">
<title>练习</title>
<style>
p.haha{
color:red;
}
</style>
</head>
<body>
<h1>这是标题1</h1>
<p>这是一个纯洁的p标签<p>
<p class="haha">这是一个带class的p标签</p>
<h5 class="haha">这是标题5</h5>
</body>
</html>
效果图
image.png
并集选择器
选择器1,选择器2,...{
属性:值;
}
- 选择器之间用,号分隔
- 用于多个选择器设置同一格式
将所有的文本变成红色
- 示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "utf-8">
<meta name="viewport"content="width=device0-width,initial-scale=1.0">
<title>练习</title>
<style>
h1,
.haha,
#h5666{
color:red;
}
</style>
</head>
<body>
<h1>这是标题1</h1>
<p class="haha">这是p标签</p>
<h5 id="h5666">这是标题5</h5>
</body>
</html>
-
效果图
image.png
