伪元素选择器概述伪元素选择器(Pseudo-element Selectors)用于选择元素的特定部分,例如首字母、首行、前面或后面的内容等。伪元素以双冒号 :: 开头。语法选择器::伪元素 { 属性: 值; }注意: 单冒号 : 是旧语法,双冒号 :: 是新语法(推荐)。为了兼容性,浏览器通常两种语法都支持。常用伪元素1. ::before - 元素前面插入内容在元素内容之前插入生成的...
2026年02月23日
伪元素选择器概述伪元素选择器(Pseudo-element Selectors)用于选择元素的特定部分,例如首字母、首行、前面或后面的内容等。伪元素以双冒号 :: 开头。语法选择器::伪元素 { 属性: 值; }注意: 单冒号 : 是旧语法,双冒号 :: 是新语法(推荐)。为了兼容性,浏览器通常两种语法都支持。常用伪元素1. ::before - 元素前面插入内容在元素内容之前插入生成的...
2026年02月23日
伪类选择器概述伪类选择器(Pseudo-class Selectors)用于选择处于特定状态的元素,例如:hover、:focus、:active 等。伪类以冒号 : 开头。语法选择器:伪类 { 属性: 值; }常用伪类分类1. 链接伪类:link - 未访问的链接a:link { color: blue; }:visited - 已访问的链接a:visited { color:...
2026年02月23日
后续兄弟选择器概述后续兄弟选择器(也称为通用兄弟选择器,General Sibling Combinator)用于选择某个元素之后的所有同级兄弟元素。语法元素1 ~ 元素2 { 属性: 值; }注意: 两个元素之间用波浪号 ~ 分隔,并且要有空格。基本示例1. 基本用法/* 选择 h2 之后的所有同级段落 */ h2 ~ p { color: red; }<h2>标题&l...
2026年02月23日
相邻兄弟选择器概述相邻兄弟选择器(Adjacent Sibling Combinator)用于选择紧接在某个元素之后的第一个同级兄弟元素。语法元素1 + 元素2 { 属性: 值; }注意: 两个元素之间用加号 + 分隔,并且要有空格。基本示例1. 基本用法/* 选择紧跟在 h2 之后的第一个段落 */ h2 + p { color: red; font-weight: bold;...
2026年02月23日
子代选择器概述子代选择器(也称为直接子选择器)用于选择某个元素的直接子元素,只匹配第一层后代元素。语法父元素 > 子元素 { 属性: 值; }注意: 父元素和子元素之间用大于号 > 分隔,并且要有空格。基本示例1. 直接子元素/* 只选择 ul 的直接子元素 li */ ul > li { padding: 10px; background-color: #f5...
2026年02月23日