CSS基础选择器

CSS 选择器的作用

选择器是CSS的核心机制，用于精准定位页面元素并应用样式：

<div>普通div</div>
<div class="special">特殊div</div>
<p>段落文本</p>
<ul>
<li>列表项1</li>
<li class="highlight">列表项2</li>
</ul>

标签选择器

基本语法与应用

/* 选择所有指定HTML标签 */
element {
property: value;
}

典型示例：

/* 所有段落文本设为绿色 */
p {
color: green;
font-size: 16px;
}

/* 所有div元素粉色背景 */
div {
background-color: pink;
}

特点对比：

维度	说明
优点	快速统一同类元素样式
缺点	无法差异化设置
效率	解析速度最快

类选择器（Class Selector）

核心语法

.class-name {
property: value;
}

最佳实践：

<style>
/* 定义样式 */
.text-danger {
color: #dc3545;
font-weight: bold;
}

.bg-highlight {
background-color: #fffde7;
}
</style>

<!-- 应用样式 -->
<p class="text-danger">错误提示信息</p>
<div class="bg-highlight text-danger">重要通知</div>

命名规范

1. 推荐命名方式：

• 中划线命名：.main-content
• BEM命名法：.btn--primary

2. 禁止事项：

• 纯数字：.123
• 中文：.红色文本
• 无意义字符：.a1b2

类选择器特点

• 一个元素可应用多个类（空格分隔）
• 一个类可应用于多个元素
• 最常用的选择器类型

ID选择器

基本用法

#unique-id {
property: value;
}

与类选择器对比：

特性	类选择器	ID选择器
符号	.	#
复用性	可多次使用	全局唯一
应用场景	常规样式	锚点/JS操作
优先级权重	10	100

<!-- 正确用法 -->
<nav id="main-nav">...</nav>

<script>
// JavaScript通过ID获取元素
document.getElementById('main-nav')
</script>

通配符选择器

使用场景

/* 重置浏览器默认样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* 特殊效果 */
.highlight-area * {
color: gold;
}

性能警告

过度使用通配符选择器会导致：

1. 页面渲染性能下降
2. 样式意外覆盖 建议仅在reset.css或特定范围内使用

基础选择器总结

对比表格（增强版）

选择器类型	示例	权重值	复用性	应用场景
标签选择器	div	1	高	基础元素样式
类选择器	.active	10	高	90%的样式场景
ID选择器	#header	100	低	页面锚点/JS操作
通配符	*	0	最高	样式重置/特殊效果

实战案例

类选择器布局

<style>
.box {
width: 120px;
height: 120px;
margin: 10px;
display: inline-block;
text-align: center;
line-height: 120px;
color: white;
font-weight: bold;
}

.primary-box {
background-color: #4285f4;
}

.warning-box {
background-color: #ff9800;
}

.danger-box {
background-color: #f44336;
}
</style>

<div class="box primary-box">主要</div>
<div class="box warning-box">警告</div>
<div class="box danger-box">危险</div>

综合登录表单

<style>
#login-form {
width: 300px;
margin: 50px auto;
padding: 20px;
border: 1px solid #ddd;
}

.form-title {
text-align: center;
color: #333;
margin-bottom: 20px;
}

.form-input {
width: 100%;
padding: 8px;
margin-bottom: 15px;
border: 1px solid #ccc;
}

.submit-btn {
background-color: #4CAF50;
color: white;
padding: 10px 15px;
border: none;
width: 100%;
}
</style>

<form id="login-form">
<h2 class="form-title">用户登录</h2>
<input type="text" class="form-input" placeholder="用户名">
<input type="password" class="form-input" placeholder="密码">
<button type="submit" class="submit-btn">登录</button>
</form>