伪类选择器

使用 :last-child 可选中父元素下最后一个子元素，如 li:last-child 去除列表末项边框；若需选中特定类型最后一个元素，则用 :last-of-type，例如 p:last-of-type 给最后一段文字加样式。 要选中最后一个子元素，可以使用 CSS 中的 :last-chil…

:nth-child(n)按所有子元素排序，要求第n个位置的元素是目标标签；:nth-of-type(n)按同类型元素排序，选择该类型中第n个。例如在span、p、span、p结构中，p:nth-child(2)选第一个p（整体第2个），p:nth-of-type(2)选第二个p（p类第2个）。两者…

通过CSS选择器与动画结合实现渐变效果，1. 使用class选择器配合:hover触发动画；2. 利用属性选择器根据data-type设定不同渐变方向；3. 结合:nth-child结构选择器控制子元素依次播放；4. 通过JavaScript切换类名实现动态渐变逻辑。 使用CSS选择器与动画结合，可…

颜色优先级取决于选择器特异性、声明顺序和继承规则，内联样式 > ID选择器 > 类/属性/伪类选择器 > 元素选择器，!important最高但慎用，子元素可覆盖继承值，开发者工具可调试生效情况，rgba支持透明度适合复杂视觉效果，hex更简洁适用于纯色场景。 CSS背景颜色和文字…

:checked伪类用于选中状态的复选框或单选按钮，可改变其样式或联动其他元素；通过accent-color可修改默认颜色，结合label与隐藏input能自定义外观，利用兄弟选择器可实现无JS的折叠菜单等交互效果。 当处理复选框的样式时，:checked 伪类选择器非常有用。它能选中处于“选中”状…

:first-child和:last-child用于选中父元素的首项和末项子元素，可分别对列表、导航、表格等结构的首个和最后一个元素设置特殊样式，如导航间距控制、列表首尾项样式、表格表头与末行优化，减少类名依赖，提升维护性，但需注意DOM中其他节点可能影响匹配。 在CSS中，:first-child…

通过使用属性选择器、伪类和现代布局模型，可高效构建响应式图片画廊。首先利用[class^=”gallery-“]统一应用Flexbox布局，实现自动排列与间隙控制；再通过:nth-child(4n)清除每行末项边距，避免错位；结合[data-layout=”mas…

:nth-of-type 伪类选择器按元素类型和位置精准匹配，不受其他标签干扰。1. p:nth-of-type(2) 选中第二个段落，忽略非p标签；2. an+b 公式实现周期样式，如2n+1选奇数项用于斑马纹；3. -n+3 形式选前3项，适合前几项特殊样式；4. 可与类、伪类组合，如.item…

:nth-last-child 伪类选择器用于从父元素最后一个子元素开始倒序选中指定位置的子元素，语法为 :nth-last-child(an + b)，其中 a 为步长、b 为偏移量；例如 li:nth-last-child(1) 选中最后一个 li，li:nth-last-child(2n) 选…

:first-of-type和:last-of-type用于选择父元素中同类型子元素的第一个或最后一个，按元素类型匹配而非位置，可精准控制样式如去除首尾段落边距、设置导航圆角或高亮表格首末行，比:nth-child更灵活，无需额外类名即可实现语义化样式控制。 在CSS中，:first-of-type…