CSS标签选择器
标签选择器（元素选择器）是最基本的选择器之一，用于选择HTML文档中的特定标签元素并应用样式。它使用HTML标签名称作为选择器，选择匹配该标签的所有元素。
作用：通过HTML标签名选择元素
以下是CSS标签选择器的实例：
选择所有<p>元素并将其文字颜色设置为红色
p{
color: black;
}
选择所有<h1>元素并将其字体大小设置为24像素：
h1{
font-size: 24px;
}
选择所有<a>元素并将其文本装饰设置为无下划线：
a{
text-decoration: none;
}
选择所有<ul>元素并将其列表样式设置为无圆点：
ul{
list-style-type: disc;
}
选择所有<input>元素并将其边框设置为虚线：
input{
border: 1px dashed #000;
}
实例展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
font-size: 124px;
}
h1{
color: red;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<h1>标题</h1>
<p>段落</p>
<p>
这是一个分段<a href="#">link</a>
</p>
</body>
</html>
CSS类选择器
CSS类选择器用于选择具有相同类名的HTML元素，并应用相应的样式。它使用 . 前缀名来选择具有相应类的元素。
以下是关于CSS类选择器的示例
选择所有具有类的container元素并将其背景颜色设置为灰色
.container {
background-color: gray;
}
选择所有具有类的highlight元素并将其文字颜色设置为黄色：
.highlight{
color:yellow;
}
选择所有具有多个类的元素，并同时应用样式：
.class.class2{
font-weight: bold;
text-decoration: underline;
}
选择所有具有以特定前缀开头的类名的元素，并应用样式：
[class^="prefix-"]{
font-style: italic;
}
以下是类选择器的示例，展示如何将样式应用到HTML页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
background-color: gray;
}
.highlight{
color:yellow;
}
</style>
</head>
<body>
<div class="container">
<h1>这是标题</h1>
<p class="highlight"> 这是一个分段</p>
<p>段落</p>
</div>
</body>
</html>