組合選擇器
目錄
交集選擇器
語(yǔ)法結(jié)構(gòu)
選擇器1選擇器2...{
屬性:值;
}
- 選擇器之間沒有任何的連接符號(hào)
- 選擇器使用任意的選擇器
將僅帶有class的p標(biāo)簽變色
- 示例代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "utf-8">
<meta name="viewport"content="width=device0-width,initial-scale=1.0">
<title>練習(xí)</title>
<style>
p.haha{
color:red;
}
</style>
</head>
<body>
<h1>這是標(biāo)題1</h1>
<p>這是一個(gè)純潔的p標(biāo)簽<p>
<p class="haha">這是一個(gè)帶class的p標(biāo)簽</p>
<h5 class="haha">這是標(biāo)題5</h5>
</body>
</html>
效果圖
image.png
并集選擇器
選擇器1,選擇器2,...{
屬性:值;
}
- 選擇器之間用,號(hào)分隔
- 用于多個(gè)選擇器設(shè)置同一格式
將所有的文本變成紅色
- 示例代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "utf-8">
<meta name="viewport"content="width=device0-width,initial-scale=1.0">
<title>練習(xí)</title>
<style>
h1,
.haha,
#h5666{
color:red;
}
</style>
</head>
<body>
<h1>這是標(biāo)題1</h1>
<p class="haha">這是p標(biāo)簽</p>
<h5 id="h5666">這是標(biāo)題5</h5>
</body>
</html>
-
效果圖
image.png
