CSS的5种基本选择器

背景：学习前端知识，自己做页面
目的：学习前端知识
组网图：不涉及
工具：vscode1.41.0
简介：CSS的5种基本选择器：
第一种，元素选择器：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>huahua</title><style>/* 元素选择器 */h1 {color: blue;}</style>
</head>
<body><h1>爱你呦</h1><h1>爱你呦</h1><h1>爱你呦</h1>
</body>
</html>

第二种，类选择器：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>huahua</title><style>/* 类选择器 */.cls {color: blue;}</style>
</head>
<body><h1>爱你呦</h1><h1 class="cls">爱你呦</h1><h1>爱你呦</h1>
</body>
</html>

第三种，ID选择器：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>huahua</title><style>/* ID选择器 */#box {color: blue;}</style>
</head>
<body><h1 id="box">爱你呦</h1><h1>爱你呦</h1><h1>爱你呦</h1>
</body>
</html>

第四种，属性选择器：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>huahua</title><style>/* 属性选择器 */[name="hhh"] {color: blue;}</style>
</head>
<body><h1 id="box">爱你呦</h1><h1 class="cls">爱你呦</h1><h1 name="hhh">爱你呦</h1>
</body>
</html>

第五种，通配符选择器：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>huahua</title><style>/* 通配符选择器 */* {color: blue;}</style>
</head>
<body><h1 id="box">爱你呦</h1><h1 class="cls">爱你呦</h1><h1 name="hhh">爱你呦</h1><h2>love</h2>
</body>
</html>