当前位置：首页 > news >正文

CSS中的选择器有哪些？相对定位和绝对定位是相对于谁的？

news 2025/10/11 7:01:40

一.CSS中的选择器有哪些？

CSS选择器就像一把“精准的尺子”，帮助您从HTML文档中选出需要添加样式的元素。下表汇总了主要的类型：

选择器类型	示例	作用描述	关键点
基本选择器			所有复杂选择器的基础
元素选择器	`p { color: red; }`	选中所有 `<p>`标签。	影响范围广，常用于重置默认样式。
类选择器	`.nav { ... }`	选中所有 `class="nav"`的元素。	最常用、最灵活，可复用。
ID选择器	`#header { ... }`	选中 `id="header"`的唯一元素。	权重高，应谨慎使用。
通配符选择器	`* { margin: 0; }`	选中页面所有元素。	性能开销大，常用于清除默认边距。
组合选择器			用于表达元素间的层级或关系
后代选择器	`.box p { ... }`	选中 `.box`内部所有的 `<p>`元素。	不关心嵌套层级深度。
子选择器	`.list > li { ... }`	仅选中 `.list`的直接子元素 `<li>`。	比后代选择器更精准。
相邻兄弟选择器	`h2 + p { ... }`	选中紧接在 `h2`后面的第一个同级 `<p>`。	针对特定位置的元素。
通用兄弟选择器	`h2 ~ p { ... }`	选中 `h2`后面所有的同级 `<p>`。	范围比相邻兄弟选择器大。
群组选择器	`h1, h2, .title { ... }`	同时选中多个元素，应用相同样式。	减少代码重复，高效。
属性选择器	`[type="text"] { ... }`	根据元素的属性及值来匹配元素。	常用于选择特定类型的输入框。
伪类选择器	`a:hover { ... }`	选择元素的特定状态，如鼠标悬停。	增加交互效果。
伪元素选择器	`p::first-line { ... }`	选择元素的特定部分，如首行或之前之后插入内容。	`::before`和 `::after`非常强大。

关于优先级（特异性）

当多个规则作用于同一元素时，CSS会根据选择器的类型计算一个“权重”来决定哪个样式生效。其基本规则是

：

行内样式（style="..."） > ID选择器 > 类/伪类/属性选择器 > 元素/伪元素选择器

建议：在日常开发中，优先使用类选择器（.class），因为它灵活且权重适中，有利于组件化开发和样式复用。

二.📍 理解相对定位与绝对定位

CSS的 position属性用于控制元素的位置，其中 relative（相对定位）和 absolute（绝对定位）是最常用的两种值。

特性	相对定位 (relative)	绝对定位 (absolute)
参照物	相对于元素自身原本在文档流中的位置进行偏移。	相对于最近一个设置了定位（非 `static`）的祖先元素进行定位。如果找不到，则相对于整个网页文档（`<html>`）。
是否脱离文档流	不脱离。元素原本占据的空间会被保留，周围的元素不会重新排列。	完全脱离。元素不再占据空间，其原来的位置会被其他元素填充。
常见用途	1. 微调元素位置。 2. 作为绝对定位子元素的“定位父元素”（“子绝父相”的经典布局）。	1. 创建弹出层、下拉菜单、工具提示等需要脱离常规流的功能。 2. 将元素精确地放置在容器的特定位置。

核心区别与配合

参照物不同是两者的根本区别：相对定位“靠自己”，绝对定位“找靠山”（已定位的祖先元素）。
它们经常配合使用，即经典的 “子绝父相” 策略：为父元素设置 position: relative;（但不设置偏移量，使其视觉位置不变），然后为子元素设置 position: absolute;，这样子元素就可以以这个父容器为边界进行精确绝对定位。

查看全文

http://www.dtcms.com/a/465438.html