CSS 选择器

发表于 分类于 阅读次数： 本文字数： 628 阅读时长 ≈ 2 分钟

常用 CSS 选择器名称和功能

选择器名称 实例 功能
#id #div 获取 id=“#div” 的元素
.class .red 获取 class=“red” 的全部元素
element div 获取所有
element element div p 获取
element,element div,p 获取全部
element>element div>p 获取父元素为
element+element div+p 获取紧接在
* * 获取所有元素

属性选择器名称和功能

选择器名称 实例 功能
[attribute] [title] 选择带有 title 属性的全部元素
[attribute=value] [title=abc] 选择 title 属性值为 abc 的全部元素
[attribute~=value] [title~=abc] 选择 title 属性包含单词 abc 的全部元素
[attribute|=value] [title|=abc] 选择 title 属性等于 abc 或以 abc- 开头的所有元素
[attribute^=value] [title^=“abc”] 选择 title 属性值以 abc 开头的全部元素
[attribute=value]|[title=“abc”] 选择 title 属性值以 abc 结尾的全部元素
[attribute*=value] [title*=”abc“] 选择 title 属性值中包含 abc 的全部元素

伪元素选择器名称和功能

选择器名称 实例 功能
:first-letter p:first-letter 获取每个 p 元素的首个字母
:first-line p:first-line 获取每个 p 元素的第一行
:before p:before 在每个 p 元素的内容之前插入内容
:after p:after 在每个 p 元素的内容之后插入内容

普通伪类选择器名称和功能

选择器名称 实例 功能
:root :root 获取文档的根元素
:empty p:empty 获取没有子类元素的每个 p 元素，包括文本节点
:target #nav.target 获取当前活动的 #nav 元素
:enabled input:enabled 获取每个可用的 input 元素
:disabled input:disabled 获取每个禁用的 input 元素
:checked input:checked 获取每个被选中的 input 元素
:not(selector) :not(p) 获取非 p 元素的每个元素

结构化伪类选择器名称和功能

选择器名称 实例 功能
:first-child li:first-child 选择每个子类 li 元素的第一个元素
:last-child li:last-child 选择每个子类 li 元素的最后一个元素
:first-of-type li:first-of-type 选择每个子类 li 元素的第一个元素
:last-of-type li:last-of-type 选择每个子类 li 元素的最后一个元素
:only-of-type li:only-of-type 选择每个 li 元素是其父级的唯一元素
:nth-child(n) li:nth-child(2) 选择每个子类 li 元素的第二个元素