CSS3中的基本选择器
CSS选择器用于选择需要应用样式的HTML元素。选择器的类型有很多，了解并掌握这些选择器有助于更灵活地控制网页的样式。
基本选择器主要有以下用法：
1、元素选择器：选择所有指定的HTML元素。
使用示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素选择器示例</title>
<style>
p {
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<h1>元素选择器</h1>
<p>这是一个段落，它的颜色是蓝色，字体大小是18px。</p>
<p>这是另一个段落，也使用相同的样式。</p>
</body>
</html>2、类选择器：选择所有带有指定类名的元素。类选择器前面使用“.”。
使用示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>类选择器示例</title>
<style>
.highlight {
color: green;
background-color: lightyellow;
padding: 10px;
}
</style>
</head>
<body>
<h1>类选择器</h1>
<p>这是一个带有类名为highlight的段落。</p>
<p>这是一个普通段落，没有特殊样式。</p>
<p>另一个带有highlight类的段落。</p>
</body>
</html>3、ID选择器：选择具有指定ID的唯一元素。ID选择器前面使用“#”。
使用示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ID选择器示例</title>
<style>
#unique {
color: white;
background-color: purple;
padding: 10px;
}
</style>
</head>
<body>
<h1>ID选择器</h1>
<p id="unique">这是一个带有唯一ID的段落。</p>
<p>这是一个普通段落，没有特殊样式。</p>
</body>
</html>整体三者间对比参考代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基本选择器</title>
<!-- 内嵌css样式修饰标签 -->
<style>
/* 1、元素选择器，通过元素名称选择所有标签 */
h1{
/* 统一设置字体14px */
font-size: 14px;
color:red;
}
/* 2、类选择器，通过class设置类名，再通过 .类名{} 修饰*/
.title{
background:pink;
color:green;
}
/* 3、id选择器，通过id设置名称，再通过#{}修饰 */
/* 类名和id名都有，对同一个标签修饰时，同样的属性，id的会覆盖class的样式生效 */
/* 后面学习到JavaScript这门课程时，id只能获取一个标签使用，class可以选择多个标签使用 */
#title2{
color:blue;
}
</style>
</head>
<body>
<h1>这是新闻标题</h1>
<!-- ctrl + 回车，会自动换到下一行 -->
<h1 class="title" id="title2">新闻标题2</h1>
<h1 id="title2">id的标题命名</h1>
<h1>11111</h1>
<h1>222222</h1>
<h2>h2222222222</h2>
<h2 class="title">h2222222222</h2>
<h2 id="title2">h2222222222</h2>
<p>段落11111</p>
<p class="title">段落11111</p>
<p id="title2">段落11111</p>
<p>段落11111</p>
</body>
</html>
需要购买本课才能留言哦~