您现在的位置是：网站首页 > 基本选择器（元素、类、ID）文章详情
基本选择器（元素、类、ID）
陈川
【
CSS
】
61985人已围观
3763字
基本选择器（元素、类、ID）
CSS选择器是样式规则的核心部分，用于指定哪些HTML元素应该应用特定的样式。基本选择器包括元素选择器、类选择器和ID选择器，它们是最基础也是最常用的选择器类型。
元素选择器
元素选择器直接使用HTML标签名作为选择器，它会选中页面上所有该类型的元素。这种选择器适用于需要统一设置某个标签默认样式的场景。
<p>这是一个段落</p>
<div>这是一个div</div>
<p>这是另一个段落</p>
/* 所有p元素都会应用这个样式 */
p {
color: blue;
font-size: 16px;
}
/* 所有div元素都会应用这个样式 */
div {
background-color: #f0f0f0;
padding: 10px;
}
元素选择器可以组合使用，实现更精确的选择：
/* 同时选择h1和h2元素 */
h1, h2 {
font-family: 'Arial', sans-serif;
margin-bottom: 20px;
}
类选择器
类选择器以点号(.)开头，后面跟着类名。它可以选择所有具有指定class属性的元素，不论元素类型。类选择器比元素选择器更具针对性，可以跨元素类型应用相同样式。
<div class="highlight">高亮显示的div</div>
<p class="highlight">高亮显示的段落</p>
<span class="highlight">高亮显示的span</span>
/* 所有具有highlight类的元素 */
.highlight {
background-color: yellow;
font-weight: bold;
}
类选择器可以结合元素选择器使用，限定特定元素类型的类：
/* 只对p元素中的highlight类有效 */
p.highlight {
border-left: 3px solid red;
padding-left: 10px;
}
一个元素可以有多个类，用空格分隔：
<button class="btn btn-primary btn-large">主要按钮</button>
.btn {
display: inline-block;
padding: 6px 12px;
border-radius: 4px;
}
.btn-primary {
background-color: #337ab7;
color: white;
}
.btn-large {
padding: 10px 16px;
font-size: 18px;
}
ID选择器
ID选择器以井号(#)开头，后面跟着ID名。它选择具有指定id属性的元素，ID在页面中应该是唯一的。ID选择器具有最高的优先级（在基本选择器中）。
<div id="header">页面头部</div>
<nav id="main-navigation">主导航</nav>
#header {
background-color: #333;
color: white;
padding: 20px;
}
#main-navigation {
background-color: #f8f8f8;
border-bottom: 1px solid #ddd;
}
ID选择器通常用于标识页面中唯一的、重要的部分，如布局的主要区域或特定的功能组件。
选择器优先级
当多个选择器应用于同一个元素时，CSS有一套优先级规则决定哪个样式会生效：
- ID选择器 (#id) - 优先级最高
- 类选择器 (.class)、属性选择器 ([type="text"])和伪类 (:hover)
- 元素选择器 (div)和伪元素 (::before)
<div id="content" class="main-content">内容区域</div>
div {
color: black; /* 最低优先级 */
}
.main-content {
color: blue; /* 中等优先级 */
}
#content {
color: red; /* 最高优先级 - 最终生效 */
}
实际应用示例
下面是一个综合使用三种基本选择器的完整示例：
<!DOCTYPE html>
<html>
<head>
<style>
/* 元素选择器 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
}
/* 类选择器 */
.container {
width: 80%;
margin: 0 auto;
padding: 20px;
}
.card {
background: #fff;
border: 1px solid #ddd;
border-radius: 5px;
padding: 15px;
margin-bottom: 20px;
}
.btn {
display: inline-block;
padding: 8px 16px;
background: #333;
color: white;
text-decoration: none;
border-radius: 4px;
}
/* ID选择器 */
#header {
background: #333;
color: white;
padding: 20px 0;
text-align: center;
}
#footer {
background: #333;
color: white;
text-align: center;
padding: 10px 0;
margin-top: 20px;
}
</style>
</head>
<body>
<header id="header">
<h1>网站标题</h1>
</header>
<div class="container">
<div class="card">
<h2>卡片标题</h2>
<p>卡片内容描述...</p>
<a href="#" class="btn">了解更多</a>
</div>
<div class="card">
<h2>另一个卡片</h2>
<p>另一个卡片的内容...</p>
<a href="#" class="btn">点击这里</a>
</div>
</div>
<footer id="footer">
<p>版权信息 © 2023</p>
</footer>
</body>
</html>
选择器的最佳实践
- 尽量使用类选择器而不是ID选择器，因为类选择器更灵活且可重用
- 避免过度具体的选择器，如
div#header ul.nav li a，这会增加不必要的特异性 - 保持选择器简洁，便于维护和覆盖
- 对于页面唯一元素（如布局的主要部分）可以使用ID选择器
- 使用有意义的类名，如
.btn-primary比.blue-btn更好
选择器的组合使用
基本选择器可以组合使用，创建更具体的选择：
/* 选择所有具有warning类的p元素 */
p.warning {
color: red;
}
/* 选择ID为sidebar中所有具有highlight类的元素 */
#sidebar .highlight {
background-color: #ffffcc;
}
这种组合方式可以精确地定位到需要样式化的元素，而不影响其他元素。
上一篇： 页面内锚点的创建与使用
下一篇： 属性选择器的各种形式
