`+` 和 `~` 选择器有什么区别？

2019-01-02

回答

毗邻兄弟选择器 + 可以选择紧随元素后的所有同级元素。如：div ~ p 可以选择紧随 div 元素后且与其同级的 p 元素。

一般兄弟选择器 ~ 可选择元素后的所有同级元素。如：p ~ span 将会匹配同一父元素下，p 元素后的所有 span 元素。

加分回答

• 基本元素选择器
• *：通用元素选择器，匹配任何元素
• .footer：匹配 class="footer" 的所有元素
• #comments：匹配 id="comments" 的所有元素
• <side> 匹配标签为 side 的所有元素
• 组合选择元素器
• a, span：匹配所有 a 元素和 span 元素
• div span：匹配所有 div 元素下的 所有 span 元素
• div > span：匹配所有 div 元素下的所有子元素 span
• 前面介绍过的 + 和 ~
• 属性选择器
• [target]：匹配含有 target 属性的所有元素
• [target=_blank]：匹配 target 属性值等于 _blank 的所有元素
• [title~=flower]：匹配 title 属性值中包含 flower 单词的所有元素（flower 需被空格截断）
• [lang|=en]：匹配 lang 属性值中以 en 开头的单词的所有元素（en 后不能有空格）
• [src^="https"]：匹配 src 属性值中以 https 开头的所有元素
• [src$=".pdf"]： 匹配 src 属性值中以 .pdf 结尾的所有元素
• [src*="abc"]：匹配 src 属性值中包含 abc 字符串的所有元素
• 伪类：:active、:any-link、:blank、:checked、:current、:default、:defined、:dir()、:disabled、:drop、:empty、:enabled、:first、:first-child、:first-of-type、:fullscreen、:future、:focus、:focus-visible、:focus-within、:has()、:host、:host()、:host-context()、:hover、:indeterminate、:in-range、:invalid、:is()、:lang()、:last-child、:last-of-type、:left、:link、:local-link、:not()、:nth-child()、:nth-col()、:nth-last-child()、:nth-last-col()、:nth-last-of-type()、:nth-of-type()、:only-child、:only-of-type、:optional、:out-of-range、:past、:placeholder-shown、:read-only、:read-write、:required、:right、:root、:scope、:target、:target-within、:user-invalid、:valid、:visited、:where()
• 伪元素：::after (:after)、::backdrop、::before (:before)、::cue (:cue)、::first-letter (:first-letter)、::first-line (:first-line)、::grammar-error、::marker、::placeholder、::selection、::slotted()、::spelling-error

返回总目录

每天 30 秒