CSS 选择器 参考
CSS 选择器
在 CSS 中,选择器是用于选择想要设置样式的元素的模式。
使用我们的 CSS 选择器测试器 来演示不同的选择器。
选择器 | 例子 | 示例说明 |
---|---|---|
.班级 | 。介绍 | 选择所有带有 class="intro" 的元素 |
.类1.类2 | .名称1.名称2 | 选择所有同时满足 名称1 和名称2 在其类属性内设置 |
.类1 .类2 | .名称1 .名称2 | 选择所有元素 名称2 是元素的后代,名称1 |
#ID | #名 | 选择 id="firstname" 的元素 |
* | * | 选择所有元素 |
元素 | 页 | 选择全部<p>元素 |
元素.class | p.介绍 | 选择全部<p>带有 class="intro" 的元素 |
元素,元素 | 分红,页 | 选择全部<div>元素和所有<p>元素 |
元素 元素 | 分页 | 选择全部<p>里面的元素<div>元素 |
元素>元素 | div > p | 选择全部<p>父元素是<div>元素 |
元素+元素 | div + p | 选择第一个<p>紧接着的元素<div>元素 |
元素1~元素2 | 気 | 选择每一个<ul>元素前面有一个<p>元素 |
[属性] | [目标] | 选择具有目标属性的所有元素 |
[属性=价值] | [目标=_空白] | 选择所有带有 target="_blank" 的元素 |
[属性~=价值] | [标题~=花] | 选择 title 属性包含单词“flower”的所有元素 |
[属性|=价值] | [lang|=zh] | 选择所有 lang 属性值为“en”或以“en-”开头的元素 |
[属性^=价值] | 一个[href^="https"] | 选择<a>href 属性值以“https”开头的每个元素</a> |
[属性$=价值] | 一个[href$=".pdf"] | 选择<a>href 属性值以“.pdf”结尾的每个元素</a> |
[属性*=价值] | 一个[href*="w3schools"] | 选择<a>href 属性值包含子字符串“w3schools”的每个元素</a> |
:积极的 | 答:活跃 | 选择活动链接 |
::后 | p::之后 | 在每个内容后面插入一些内容<p>元素 |
::前 | p::之前 | 在每个内容前插入一些内容<p>元素 |
:已检查 | 输入:已检查 | 选择每个已检查的<input>元素 |
:默认 | 输入:默认 | 选择默认<input>元素 |
:已禁用 | 输入:已禁用 | 选择每一个残疾人<input>元素 |
:空的 | p:空 | 选择每一个<p>没有子元素(包括文本节点) |
:启用 | 输入:启用 | 选择每个启用的<input>元素 |
:第一个孩子 | p:第一个孩子 | 选择每一个<p>父元素的第一个子元素 |
::首字母 | p::首字母 | 选择每个的第一个字母<p>元素 |
::第一行 | p::第一行 | 选择每个的第一行<p>元素 |
:first-of-type | p:第一个类型 | 选择每一个<p>第一个元素<p>其父元素 |
:重点 | 输入:焦点 | 选择具有焦点的输入元素 |
:全屏 | :全屏 | 选择处于全屏模式的元素 |
:徘徊 | 悬停 | 鼠标悬停时选择链接 |
:在范围内 | 输入:在范围内 | 选择具有指定范围内的值的输入元素 |
:不定 | 输入:不确定 | 选择处于不确定状态的输入元素 |
:无效的 | 输入:无效 | 选择所有具有无效值的输入元素 |
: 朗 (语言) | p: 语言 (it) | 选择每一个<p>元素的 lang 属性等于“it”(意大利语) |
:最后一个孩子 | p:最后一个孩子 | 选择每一个<p>父元素的最后一个子元素 |
:last-of-type | p:最后一种类型 | 选择每一个<p>最后一个元素<p>其父元素 |
:关联 | 一条链接 | 选择所有未访问的链接 |
::标记 | ::标记 | 选择列表项的标记 |
:不是(选择器) | :不(p) | 选择所有不属于<p>元素 |
:nth-child(n) | p:第 n 个子项(2) | 选择每一个<p>父元素的第二个子元素 |
:倒数第 n 个孩子(n) | p:倒数第 n 个孩子(2) | 选择每一个<p>从最后一个子元素开始算起,是其父元素的第二个子元素 |
:第 n 个最后类型的(n) | p:第 n 个最后类型的值(2) | 选择每一个<p>第二个元素<p>其父元素的元素,从最后一个子元素开始算起 |
:nth-类型(n) | p:第 n 个类型(2) | 选择每一个<p>第二个元素<p>其父元素 |
:only-of-type | p:only-of-type | 选择每一个<p>唯一元素<p>其父元素 |
:唯一的孩子 | p:独生子女 | 选择每一个<p>父元素的唯一子元素 |
:选修的 | 输入:可选 | 选择没有“必需”属性的输入元素 |
:超出范围 | 输入:超出范围 | 选择值超出指定范围的输入元素 |
::占位符 | 输入::占位符 | 选择指定了“占位符”属性的输入元素 |
:只读 | 输入:只读 | 选择指定了“readonly”属性的输入元素 |
:读写 | 输入:读写 | 选择未指定“readonly”属性的输入元素 |
:必需的 | 输入:必填 | 选择指定了“required”属性的输入元素 |
:根 | :根 | 选择文档的根元素 |
::选择 | ::选择 | 选择用户选择的元素部分 |
:目标 | #新闻:目标 | 选择当前活动的 #news 元素(单击包含该锚点名称的 URL) |
:有效的 | 输入:有效 | 选择所有具有有效值的输入元素 |
:访问过 | 已访问 | 选择所有访问过的链接 |