定义：在CSS中，选择器用来指定网页上我们想要样式化的HTML元素。
<!--
元素选择器
作用：按照给定的节点名称，选择所有匹配的元素。
语法：元素名称{}
示例：h1{}匹配任何<h1>/p{}匹配任何<p>/div{}匹配任何<div>
-->
<head>
<meta charset='utf-8'>
<title>CSS元素选择器</title>
<style>
h1{
color: red;
}
p{
color: yellow;
}
</style>
</head>
<body>
<h1>慈母手中线，游子身上衣。</h1>
<p>临行密密缝，意恐迟迟归。</p>
</body>
<!--
ID选择器
作用：按照id属性选择一个与之匹配的元素，每个id属性都应当是唯一的。
语法：#id名称{}
示例：#box{}匹配id="box"的元素/#nav{}匹配id="nav"的元素
-->
<head>
<meta charset="UTF-8">
<title>CSS ID选择器</title>
<style>
#poem{
color: hotpink;
}
#box{
background-color: rgb(67, 117, 67);
}
</style>
</head>
<body>
<article id="poem">床前明月光，疑似地上霜。</article>
<div id="box">举头望明月，低头思故乡。</div>
</body>
<!--
通用选择器
作用：选择所有元素。（可选）可以将其限制为特定的名称空间或所有名称空间。
语法：*{}
例子：*{}将匹配文档的所有元素。
-->
<head>
<meta charset="UTF-8">
<title>CSS通用选择器</title>
<style>
*{
color: lawngreen;
}
</style>
</head>
<body>
<ul>
<li>苹果</li>
<li>橘子</li>
<li>香蕉</li>
<li>橙子</li>
</ul>
<p>在那遥远的地方，有一个姑娘。</p>
</body>
<!--
类选择器
作用：按照给定的class属性的值，选择所有匹配的元素。
语法：.类名称{}
示例：.index{}匹配任何class属性中含有"index"类的元素。
-->
<head>
<meta charset="UTF-8">
<title>CSS类选择器</title>
<style>
.index{
color: lawngreen;
}
</style>
</head>
<body>
<p class="index">第一段</p>
<p class="index">第二段</p>
<p class="index">第三段</p>
<p class="index">第四段</p>
</body>
浙公网安备 33010602011771号