Title/CSS选择器

序 : 这是flight.Archives 梦开始的地方, 作者我熬夜肝出来了这篇文章... 保证这是最简洁高效的 CSS Selectors 教程

Note : 暂时没有能够选择 父元素、父元素的同级元素，或 父元素的同级元素的子元素 的选择器或者组合器

Tag/基本选择器 (Basic selectors)

通用选择器(Universal selector) * 选择所有元素 元素选择器(Type selector) elementname 选择所有 元素 类选择器(Class selector) .classname 选择所有 class 属性中含有 "classname" 的元素 ID 选择器(ID selector) #idname 选择所有 id="idname" 的元素 属性选择器(Attribute selector) [attr][attr=value][attr~=value][attr|=value][attr^=value][attr$=value][attr*=value][attr]选择所有带有attr属性的元素
[attr=value]选择 attr 属性值为 value 的元素
[attr~=value]选择 attr 属性值包含以空格分隔的 value 的元素
[attr|=value]选择 attr 属性值以 value 或 value- 为前缀("-"为连字符，Unicode 编码为 U+002D)开头典型的应用场景是用来匹配语言简写代码(如 zh-CN，zh-TW 可以用 zh 作为 value)
[attr^=value]选择 attr 属性值以 value 开头的元素
[attr$=value]选择 attr 属性值以 value 结尾的元素
[attr*=value]选择 attr 属性值包含 value 的元素
[attr operator value i]在属性选择器的右方括号前添加一个用空格隔开的字母 i(或 I)，可以在匹配属性值时忽略大小写(支持 ASCII 字符范围之内的字母)
[attr operator value s](Experimental实验性功能)在属性选择器的右方括号前添加一个用空格隔开的字母 s(或 S)，可以在匹配属性值时区分大小写(支持 ASCII 字符范围之内的字母)

选择器	语法	作用

Tag/分组选择器 (Grouping selectors)

选择器列表(Selector list) SelectorA, SelectorB 同时选择SelectorA和SelectorB选中的内容

选择器	语法	作用

Tag/组合器 (Combinators)

后代组合器(Descendant combinator) SelectorA SelectorB(两者间空格) 选择SelectorA选中元素的所有后代节点 直接子代组合器(Child combinator) SelectorA > SelectorB 选择SelectorA选中元素的直接子代的节点 一般兄弟组合器(General sibling combinator) SelectorA ~ SelectorB 选择SelectorA选中元素之后的兄弟元素 紧邻兄弟组合器(Adjacent sibling combinator) SelectorA + SelectorB 选择SelectorA选中元素紧随其后的兄弟元素 列组合器(Column combinator)(Experimental实验性功能) SelectorA || SelectorB 选择SelectorA选中列元素中的元素

选择器	语法	作用

Tag/伪选择器(Pseudo)

伪类(Pseudo classes) :status 选择所有状态与给定 status 相同的元素 伪元素(Pseudo elements) ::Pseudo_elements 选择元素的指定伪元素

选择器	语法	作用

->> Demos

详见MDN,Codepen

->> See also

CSS选择器优先级 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity

->> Reference link

MDN中文文档 https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSSSelectors

MDN 英文文档 https://developer.mozilla.org/en-US/docs/Web/CSS/CSSSelectors

菜鸟教程 https://www.runoob.com/cs-s-ref/css-selectors.html

CodingStartUp https://www.bilibili.com/video/BV1et411K7RU

->> 文档版本&更新记录

现在版本为V1.0, 下一版预计加入"CSS支持版本"和"常用度"两列,增加Demos,并将Experimental,Tag,"->>"改为图标.
详见 Github