在 CSS 中，选择器、优先级和继承是控制样式和布局的关键概念。掌握这些概念是编写高效、可维护 CSS 代码的基础。以下我将从选择器、优先级和继承三个方面进行详细讲解，并结合实际项目的代码示例，帮助你更好地理解它们的应用。
1. CSS 选择器
CSS 选择器用于选择 HTML 元素，并将样式应用于这些元素。选择器的种类有很多，可以根据选择的精确程度分为基本选择器、组合选择器、属性选择器、伪类选择器和伪元素选择器等。
基本选择器
-
元素选择器：选择所有指定类型的元素。
p {color: red; }这个规则将会选中所有
<p>元素并将其文字颜色设置为红色。 -
类选择器：选择所有具有指定类名的元素。类选择器前面加
.。.container {padding: 20px; }这个规则将会选中所有具有
container类的元素，并为它们添加 20px 的内边距。 -
ID选择器：选择具有指定 ID 的元素。ID选择器前面加
#。#header {background-color: blue; }这个规则将会选中 ID 为
header的元素，并将其背景色设置为蓝色。 -
通配符选择器：选中所有元素。
* {margin: 0;padding: 0; }这个规则将会选中页面上的所有元素，并去除它们的外边距和内边距。
组合选择器
-
后代选择器：选择某元素内部的后代元素（不限定直接子元素）。
div p {color: green; }这个规则将会选中所有在
div元素内部的<p>元素并将其文字颜色设置为绿色。 -
子元素选择器：选择某元素的直接子元素。
ul > li {list-style-type: none; }这个规则将会选中所有
ul元素的直接子元素<li>，并去除它们的列表样式。 -
相邻兄弟选择器：选择紧接在某元素后面的兄弟元素。
h2 + p {font-size: 18px; }这个规则将会选中紧跟在
<h2>元素后面的第一个<p>元素，并将其字体大小设置为 18px。 -
通用兄弟