CSS选择器 | CSS Selectors

CSS Selectors

CSS选择器表示被设定了一组特定的CSS规则的元素。

基本选择器

类型选择器选择与给定节点名称匹配的所有元素。

语法：eltname

示例：input将匹配任何<input>元素。类选择器选择具有给定class属性的所有元素。

语法：.classname

示例：.index将匹配具有“index”类的任何元素。

语法：#idname

示例：#toc将匹配具有ID“toc”的元素.Universal 选择器选择所有元素。也可以将其限制在特定的名字空间或所有名字空间中。

句法：*ns|**|*

示例：*将匹配文档的所有元素。属性选择器根据给定属性的值选择元素。

语法：[attr][attr=value][attr~=value][attr|=value][attr^=value][attr$=value][attr*=value]

例如：[autoplay]将匹配所有设置了autoplay属性的元素（任意值）。

组合因子

相邻兄弟选择器：+组合因子选择相邻的同胞元素。这意味着第二个元素直接紧跟第一个元素，并且共享同一个父元素。

语法：A + B

示例：h2 + p将匹配所有直接跟随一个<h2>的元素<p>元素。后续兄弟选择器：~组合因子选择同胞元素。这意味着第二个元素跟随在第一个元素之后（尽管不一定紧跟其后），且都共享同一个父元素。

语法：A ~ B

示例：p ~ span将匹配<p>之后的所有<span>元素。子元素选择器：该组合因子>选择第一个元素的直接子元素节点。

语法：A > B

示例：ul > li将匹配直接嵌套在<ul>元素内的所有<li>元素。后代选择器：该组合因子选择作为第一个元素的后代的节点。

语法：A B

例子：div span将匹配<div>元素中的所有<span>元素。

伪类

伪类允许基于不存在于文档树中的状态信息来选择元素。

例如： a:visited将匹配用户访问过的所有<a>元素。

伪素

伪素表示不包含在HTML中的实体。

例如： p::first-line将匹配所有<p>元素的第一行。

规范

浏览器兼容性