ME!
链滴
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