伪类选择器

:only-child 在元素是父容器中唯一子元素时生效，无论类型；2. :only-of-type 在元素是同类型中唯一一个时生效，允许其他类型兄弟节点存在；二者区别在于匹配范围，合理使用可减少类名依赖，提升样式效率。 :only-child 和 :only-of-type 是 CSS 中用于精确…

使用:active伪类可选中用户正在激活的元素，如点击时的按钮或链接。例如button:active{background-color:red}定义按下时样式，常用于实现交互反馈，需注意与:hover、:focus等伪类按LVHAF顺序书写以避免覆盖。 在CSS中，选择处于 :active 状态的元…

:first-child和:last-child是CSS伪类，用于选中父元素的第一个或最后一个子元素。它们不依赖元素类型，只关注位置，常用于为列表首尾项设置特殊样式，如去除边距、添加圆角等。例如li:first-child{color:green;}使首个列表项绿色，li:last-child{co…

:last-child用于选中父元素的最后一个子元素，如li:last-child使最后一个li变红；常用于移除列表末尾边框或调整卡片样式，需注意仅当末尾元素匹配时才生效，支持IE9以上浏览器。 在CSS中，:last-child 是一个非常实用的伪类选择器，用于选中父元素中的最后一个子元素。它能帮…

:not()伪类选择器用于选中不匹配特定条件的元素，简化样式逻辑。它可排除指定元素，在复杂布局中非常有效，提升CSS可维护性与灵活性。 在CSS中，:not() 伪类选择器是一个非常实用的工具，它允许你选中**不匹配特定条件的元素**，从而简化样式逻辑，特别是在处理复杂布局或需要排除某些元素时尤为有…

:first-of-type 和 :last-of-type 伪类选择器用于选中父元素中同类型子元素的第一个或最后一个；例如 article p:first-of-type 可增大首段字号，.container div:last-of-type 可移除末尾边距，section img:first-o…

:first-of-type 选择器用于选中父元素内同类型标签的第一个实例，常用于标题样式控制。例如 h2:first-of-type 可为页面首个 h2 添加特殊样式，如加大字号、颜色或下划线，后续 h2 不受影响。与 :first-child 不同，它不要求元素是父级的第一个子元素，只需是同类型…

:before和:after通过content属性为元素添加装饰性内容，如引号、图标、气泡箭头及交互效果，提升视觉表现与交互体验，且不改变HTML结构。 在CSS中，:before 和 :after 是两个常用的伪元素选择器，它们可以为选定的元素插入额外的内容或装饰性元素，而无需修改HTML结构。通…

利用CSS的:hover和::before可实现无JavaScript提示框，通过position定位与opacity控制显隐，配合transition实现淡入淡出动画，支持上下左右方向自定义，轻量且兼容性好。 在网页设计中，提示效果（Tooltip）是一种常见的交互方式。利用CSS的 :hover…

:hover用于鼠标悬停时触发样式变化，:first-child匹配父元素下首个子元素；两者结合可实现如首个段落悬停加粗等精细交互，提升用户体验且无需JavaScript。 在网页设计中，:hover 和 :first-child 是两个非常实用的CSS伪类选择器。它们能帮助开发者在不增加JavaS…