介绍
CSS介绍
CSS（Cascading Style Sheets）是一种用于描述HTML文档外观的样式表语言。它允许我们控制网页的颜色、字体、布局和其他视觉元素。通过分离内容与样式，CSS提高了网站的设计灵活性、可维护性和加载速度。
基本语法:
selector {property: value;
}p { color: blue; } <!-- 这条规则会将所有<p>标签内的文本颜色设置为蓝色。 -->-
Selector（选择器）： 指定要应用样式的HTML元素。
-
Property（属性）： 定义样式的方面，如颜色、字体大小等。
-
Value（值）： 属性的具体设定值。
CSS选择器介绍
CSS选择器用于定位HTML元素并应用样式，但不能以列表形式呈现其完整分类。选择器通过特定语法规则匹配元素，例如元素选择器（如p）直接选中标签，类选择器（如.class）通过class属性匹配，而ID选择器（如##id）基于唯一标识定位。此外，属性选择器（如[type="text"]）按属性筛选，伪类选择器（如:hover）响应状态变化，组合选择器（如div > p）则通过层级关系精确控制。每种选择器需独立使用或组合嵌套，无法简单罗列为列表，因其语法和逻辑依赖具体应用场景。
基本选择器
CSS 基本选择器（如 p、div）本身可以用于列表，但单独使用时缺乏精确性。例如，li会选中页面所有列表项，无法区分不同层级的列表。若需精准控制，应结合后代（ul li）、子代（ul > li）或类选择器（.menu li）限定范围，避免样式污染。
1.元素选择器
通过标签名选择元素CSS元素；选择器通过HTML标签名直接匹配元素，是最基础的选择器类型。例如p{}选中所有段落，div{}选中所有div元素，简单高效但缺乏精确性，常用于全局样式设置或重置默认样式。
p { color: blue; }2.类选择器
通过class属性选择元素；CSS类选择器通过 . 前缀匹配class属性，如.btn{}选中所有class包含"btn"的元素。它支持复用样式，优先级高于元素选择器，可组合使用实现精细化样式控制，是开发中最常用的选择器类型。
.intro { font-size: 16px; }3.ID选择器
通过id属性选择元素；CSS ID选择器通过 # 前缀匹配唯一id属性（如#name），具有最高优先级但缺乏复用性，通常用于定位页面中唯一的特定元素，应谨慎使用以避免样式管理困难。
#header { background: #ccc; }4.通用选择器
选择所有元素；CSS通用选择器用 * 匹配文档所有元素，常用于全局样式重置，但性能开销较大，应避免过度使用。它会覆盖继承样式，优先级最低，适合与特定选择器配合实现基础样式初始化。
* { margin: 0; padding: 0; }组合选择器
1.后代选择器
选择指定元素内的所有后代元素；CSS后代选择器（空格分隔）不适用于直接筛选列表项（如ul li），因其会选中所有嵌套层级的li。若需精确控制特定层级的列表样式，建议改用子选择器（>）或类名限定（如'.parent > li'），避免样式污染。
div p { color: red; }2.子代选择器
选择指定元素的直接子元素；CSS子代选择器（'parent > child'）不能直接用于列表（如'ul > li'）筛选所有后代，因为它只匹配直接子元素，会忽略嵌套在中间层（如div）的列表项，需结合类名或结构优化选择器。
div > p { color: green; }3.相邻兄弟选择器
选择紧接在另一元素后的元素；CSS相邻兄弟选择器（+）不能直接用于动态列表项（如li + li），因为它仅匹配紧邻的下一个兄弟元素，若列表结构变化（如插入新元素）会导致样式失效，需谨慎使用或改用通用兄弟选择器（~）。
h1 + p { font-weight: bold; }4.通用兄弟选择器
选择所有在指定元素后的同级元素；CSS通用兄弟选择器（~）不适合精确控制列表样式，因为它会匹配后续所有同级元素，导致非目标列表项也被选中。若需精准定位，建议改用类名或结构化选择器，避免样式意外扩散。
h1 ~ p { color: purple; }属性选择器
CSS属性选择器（如 [type="text"]）不适合直接筛选列表项（如 li），因为它依赖元素的 HTML 属性（如 class），而列表结构通常缺少明确属性标记。若强行使用，可能导致样式难以维护或意外匹配无关元素。建议改用类选择器（.list-item）或结构化伪类（:nth-child()）提高精准度。
1.[attribute]
选择带有指定属性的元素
[target] { border: 1px solid black; }2.[attribute=value]
选择属性值等于指定值的元素
[type="text"] { background: yellow; }3.[attribute~=value]
选择属性值包含指定词的元素
[title~="flower"] { border: 5px solid green; }4.[attribute|=value]
选择属性值以指定词开头的元素
[lang|="en"] { color: blue; }5.[attribute^=value]
选择属性值以指定值开头的元素
a[href^="https"] { color: green; }6.[attribute$=value]
选择属性值以指定值结尾的元素
a[href$=".pdf"] { background: url(pdf-icon.png); }伪类选择器
CSS 伪类选择器（如 :hover、:nth-child()）本身可以用于列表（如 li:hover），但若滥用或依赖动态状态（如 :focus），可能导致样式不可靠。例如，li:nth-child(odd)在动态增删列表项时可能错位。建议结合类名或属性选择器提升稳定性，而非单独依赖伪类。
1.状态伪类
-
:link - 未访问的链接
-
:visited - 已访问的链接
-
:hover - 鼠标悬停时的元素
-
:active - 被激活的元素
-
:focus - 获得焦点的元素
2.结构伪类
-
:first-child - 父元素的第一个子元素
-
:last-child - 父元素的最后一个子元素 -
:nth-child(n) - 父元素的第n个子元素 -
:nth-last-child(n) - 父元素的倒数第n个子元素 -
:only-child - 父元素唯一的子元素 -
:first-of-type - 同类型的第一个兄弟元素 -
:last-of-type - 同类型的最后一个兄弟元素 -
:nth-of-type(n) - 同类型的第n个兄弟元素 -
:nth-last-of-type(n) - 同类型的倒数第n个兄弟元素 -
:only-of-type - 同类型中唯一的兄弟元素 -
:empty - 没有子元素的元素
3.表单伪类
-
:checked - 被选中的单选/复选框 -
:disabled - 被禁用的元素 -
:enabled - 可用的元素 -
:valid - 有效输入的表单元素 -
:invalid - 无效输入的表单元素 -
:required - 必填的表单元素
-
:optional - 可选的表单元素
4.其他伪类
-
:not(selector) - 不符合指定选择器的元素 -
:target - 当前活动的锚点目标元素 -
:root - 文档的根元素(html)
选择器优先级
当多个规则应用于同一元素时，CSS使用以下优先级规则：
-
!important - 最高优先级
p { color: red !important; } -
内联样式 - 直接在HTML元素上使用style属性
<p style="color: blue;">文本</p> -
ID选择器 - 如#content
-
类/属性/伪类选择器 - 如.intro, [type="text"], :hover
-
元素选择器 - 如div
优先级计算方式：从高到低比较(a,b,c,d)
-
a: 内联样式数量
-
b: ID选择器数量
-
c: 类/属性/伪类选择器数量
-
d: 元素选择器数量
选择器最佳实践
-
避免过度使用ID选择器
-
避免使用!important
-
尽量保持选择器简洁
-
优先使用类选择器而非元素选择器
-
合理使用后代选择器，避免过深嵌套
总结
CSS选择器是网页样式设计的核心工具，能够精准定位HTML元素并赋予样式规则。通过元素选择器可以直接匹配标签类型，类选择器可复用样式，ID选择器则用于唯一元素定位。组合选择器通过元素间的层级关系实现更精确的选择，如父子关系或相邻元素。属性选择器则根据元素的特定属性值进行筛选，极大增强了选择灵活性。伪类选择器能捕捉元素的特殊状态，如悬停或焦点状态。选择器优先级遵循特定规则，内联样式和ID选择器具有较高权重，但应谨慎使用以避免样式冲突。合理运用这些选择器不仅能实现精细的样式控制，还能保持代码的简洁性和可维护性，是前端开发中不可或缺的重要技能。