CSS常用选择器、优先级及常用属性

<think>我们根据用户的需求，需要总结CSS常用选择器、优先级规则以及常用属性。用户可能是为了学习或复习CSS基础知识，并将其应用于网页设计。因此，我们需要系统化地组织这些知识点，并结合实例进行说明。 参考引用内容： [^1] 提到CSS选择器优先级是指当多个规则作用于同一元素时，根据选择器的特定性和优先级规则决定哪个样式生效。 [^2] 探讨了当多个选择器针对同一元素设置样式时的优先级问题。 [^3] 展示了属性选择器的使用示例。 [^4] 详细列出了基础选择器、复合选择器、属性选择器、伪类选择器、伪元素选择器等，并介绍了优先级等级和计算规则。 [^5] 说明了标签选择器和伪元素选择器的权重相同。 因此，我们将内容分为三个部分： 1. CSS常用选择器及其用法（包括基础选择器、复合选择器、属性选择器、伪类选择器、伪元素选择器等） 2. CSS优先级规则详解（包括优先级等级、权重计算、!important规则等） 3. CSS常用属性介绍（文本、字体、背景、盒模型等） 注意：由于用户之前的问题中提到了很多CSS属性（如文本属性、字体属性、背景属性、盒模型等），我们在第三部分会简要介绍这些常用属性，但不需要过于详细（因为用户可能更关注选择器和优先级）。 另外，根据引用内容，我们会适当加入实例代码来演示选择器的使用。 最后，按照要求生成相关问题。</think>### CSS常用选择器、优先级规则及属性详解 #### 一、CSS常用选择器及用法 CSS选择器用于定位HTML元素并应用样式化，主要分为以下几类： 1. **基础选择器** - **元素选择器**：`p { color: blue; }` → 选择所有`<p>`元素 - **类选择器**：`.warning { background: yellow; }` → 选择`class="warning"`的元素 - **ID选择器**：`#header { height: 80px; }` → 选择`id="header"`的元素 - **通配符选择器**：`* { margin: 0; }` → 选择所有元素 2. **复合选择器** ```css /* 后代选择器 */ div p { font-size: 16px; } /* 选择div内所有p */ /* 子选择器 */ ul > li { list-style: none; } /* 仅选择ul的直接子li */ /* 并集选择器 */ h1, h2, h3 { color: #333; } /* 同时选择多个元素 */ /* 相邻兄弟选择器 */ h2 + p { margin-top: 10px; } /* 紧接h2后的p元素 */ ``` 3. **属性选择器** [^3] ```css [title] { border: 1px solid gray; } /* 含title属性的元素 */ [href="https"] { color: green; } /* href属性值为https */ [class^="btn-"] { padding: 8px; } /* class以"btn-"开头 */ ``` 4. **伪类与伪元素** ```css /* 链接状态 */ a:hover { text-decoration: underline; } /* 表单状态 */ input:focus { border-color: blue; } /* 结构伪类 */ li:nth-child(odd) { background: #f5f5f5; } /* 伪元素 */ p::first-letter { font-size: 150%; } /* 首字母放大 */ ``` --- #### 二、CSS优先级规则详解 当多个规则作用于同一元素时，优先级按以下规则计算： 1. **权重计算规则** [^1][^4] | 选择器类型 | 权重值 | |--------------------|--------| | `!important` | ∞ | | 行内样式（style属性） | 1000 | | ID选择器 | 100 | | 类/属性/伪类选择器 | 10 | | 元素/伪元素选择器 | 1 | | 通配符/继承样式 | 0 | 2. **计算示例** [^2][^5] ```css #nav .item { } /* 权重 = 100 + 10 = 110 */ div ul li a { } /* 权重 = 1×4 = 4 */ .menu > li:hover {} /* 权重 = 10 + 1 + 10 = 21 */ ``` 3. **特殊规则** - `!important` 强制优先级最高（慎用） ```css .error { color: red !important; } ``` - **相同权重**：后定义的样式覆盖先定义的 - **继承样式**：权重最低，低于通配符选择器 --- #### 三、CSS常用属性介绍 1. **文本与字体属性** ```css p { font-family: "Microsoft YaHei", sans-serif; /* 字体栈 */ font-size: 16px; font-weight: bold; line-height: 1.5; /* 行高 */ text-align: center; /* 文本对齐 */ text-decoration: none; /* 下划线控制 */ } ``` 2. **背景与边框属性** ```css .banner { background-color: #f0f0f0; background-image: url("bg.jpg"); background-size: cover; /* 背景图缩放 */ border: 1px solid #ddd; /* 边框 */ border-radius: 8px; /* 圆角 */ } ``` 3. **盒模型属性**（核心布局） ```css .box { width: 300px; height: 200px; padding: 20px; /* 内边距 */ margin: 10px auto; /* 外边距（上下10px，左右居中） */ box-sizing: border-box; /* 包含边框和内边距的宽高 */ } ``` 4. **布局控制属性** ```css .container { display: flex; /* 弹性布局 */ position: relative; /* 定位基准 */ float: left; /* 浮动布局 */ overflow: hidden; /* 溢出处理 */ } ``` --- ### 关键总结 1. **选择器优先级**是CSS的核心机制，理解权重计算（ID > 类 > 元素）能避免样式冲突[^1][^4] 2. **盒模型**（content-padding-border-margin）是布局基础，`box-sizing: border-box`能简化尺寸计算 3. **弹性布局**（Flexbox）和**网格布局**（Grid）已取代浮动成为现代布局首选方案 4. 避免滥用`!important`，优先通过选择器权重控制样式层级[^2] > 实践建议：使用Chrome开发者工具的"Computed"面板调试样式优先级，实时查看生效规则。