2019-02-27

前端 / CSS

20 分钟读完 (大约 2928 个字) 0次访问

【译】一张图搞定CSS选择器知识

原文：CSS selectors cheatsheet & details
作者：nana Jeon 译者：gylidian
📜 CSS selectors cheatsheet

这些天，我一直在折腾 CSS 选择器。

拥有杂七杂八符号的 CSS 选择器太多了，比如 > . , * + ~ [] 等等，因此我经常被如何使用这些选择器搞得头大。

终于，我把它们在我脑海中理顺了，并按照我的理解来构建知识体系。

*事实上，为了节省纸张、保护地球，我原本是想把它们全部只放在一张 A4 大小的页面上，但因为有太多的选择器我想添加，所以我不得不做成多页。除了封面外，其余四页都是 A4 的。

把这张纸打印出来，贴在墙上，别刻意去记，只是用来没事儿偷瞄几眼而已。我希望这张 cheatsheet 能帮助你快速找到合适的 CSS 选择器并节省时间。

CSS selectors cheatsheet

CSS selectors game by Ryan Yu

🔮 来！下载 CSS selectors cheatsheet.pdf 吧！然后玩玩 这个游戏🕹！

CSS Selectors Cheatsheet - FrontEnd30
> . , + ~ : { } ( ) [ ] ID is not recommended as a selector Combine the Class Selector: b.x { } First Child Pseudo…frontend30.com

🔎 Dive into CSS selector.

我会列出图表和来自 MDN 的标准定义，使得这些知识更容易理解。

元素选择器

CSS 元素选择器(也称为类型选择器)通过 node 节点名称匹配元素. 因此,在单独使用时,寻找特定类型的元素时,元素选择器都会匹配该文档中所有此类型的元素. - MDN

ID 选择器

在一个 HTML 文档中,CSS ID 选择器会根据该元素的 ID 属性中的内容匹配元素,元素 ID 属性名必须与选择器中的 ID 属性名完全匹配，此条样式声明才会生效。 - MDN

后代选择器

当使用 ␣ 选择符 (这里代表一个空格,更确切的说是一个或多个的空白字符) 连接两个元素时使得该选择器可以只匹配那些由第一个元素作为祖先元素的所有第二个元素(后代元素) . 后代选择器与子选择器很相似, 但是后代选择器不需要相匹配元素之间要有严格的父子关系. - MDN

组合使用后代选择器和 ID 选择器

类选择器

在一个 HTML 文档中，CSS 类选择器会根据元素的类属性中的内容匹配元素。类属性被定义为一个以空格分隔的列表项，在这组类名中，必须有一项与类选择器中的类名完全匹配，此条样式声明才会生效。 - MDN

组合使用类选择器

组合器和多个选择器

组合器和选择器组 — 将多个选择器组合在一起以进一步利用其选择能力的两种方式。 - MDN

通配选择器

在 CSS 中,一个星号(*)就是一个通配选择器.它可以匹配任意类型的 HTML 元素.在配合其他简单选择器的时候,省略掉通配选择器会有同样的效果.比如,*.warning 和.warning 的效果完全相同. - MDN

组合使用通配选择器

相邻兄弟选择器

相邻兄弟选择器 (+) 介于两个选择器之间，当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中。 - MDN

通用兄弟选择器

在使用 ~ 连接两个元素时,它会匹配第二个元素,条件是它必须跟(不一定是紧跟)在第一个元素之后,且他们都有一个共同的父元素 . - MDN

子选择器

当使用 > 选择符分隔两个元素时,它只会匹配那些作为第一个元素的直接后代(子元素)的第二元素. 与之相比, 当两个元素由后代选择器相连时, 它表示匹配存在的所有由第一个元素作为祖先元素(但不一定是父元素)的第二个元素, 无论它在 DOM 中”跳跃” 多少次. - MDN

:first-child

:first-child CSS pseudo-class 表示在一组兄弟元素中的第一个元素。 - MDN

:only-child

CSS伪类:only-child代表了属于某个父元素的唯一一个子元素.等效的选择器还可以写成 :first-child:last-child或者:nth-child(1):nth-last-child(1),当然,前者的权重会低一点. - MDN

:last-child

:last-child` CSS 伪类代表父元素的最后一个子元素。 - MDN

:nth-child

:nth-child(an+b) 这个 CSS 伪类首先找到所有当前元素的子元素，然后按照位置先后顺序从 1 开始排序，选择的结果为第（an+b）个元素的集合（n=0，1，2，3…）。 - MDN

:nth-last-child

:nth-last-child(an+b) 这个 CSS 伪类匹配文档树中在其之后具有 *a*n+*b*-1 个兄弟节点的元素，其中 n 为正值或零值。它基本上和 :nth-child 一样，只是它从结尾处反序计数，而不是从开头处。 - MDN

:first-of-type

CSS 伪类 :first-of-type表示一组兄弟元素中其类型的第一个元素。 - MDN

:nth-of-type

:nth-of-type() 这个 CSS 伪类匹配文档树中在其之前具有 *a*n+*b*-1 个相同兄弟节点的元素，其中 n 为正值或零值。简单点说就是，这个选择器匹配那些在相同兄弟节点中的位置与模式 an+b 匹配的相同元素。 - MDN

🔮 Note:
:nth-of-type(even)
:nth-of-type(odd)
:nth-of-type(2)
:nth-of-type(2n)
:nth-of-type(3n-1)
:nth-of-type(2n+2)

:only-of-type

CSS 伪类 :only-of-type 代表了任意一个元素，这个元素没有其他相同类型的兄弟元素。 - MDN

附上 :only-child 和 :only-of-type 的对比：

:last-of-type

:last-of-type CSS 伪类表示了在（它父元素的）子元素列表中，最后一个给定类型的元素。当代码类似 Parent tagName:last-of-type 的作用区域包含父元素的所有子元素中的最后一个选定元素，也包括子元素的最后一个子元素并以此类推。 - MDN

:empty

:empty CSS 伪类代表没有子元素的元素。子元素只可以是元素节点或文本（包括空格）。注释或处理指令都不会产生影响。 - MDN

:not()

CSS 否定伪类，:not(X)，是以一个简单的以选择器 X 为参数的功能性标记函数。它匹配不符合参数选择器 X 描述的元素。X 不能包含另外一个否定选择器。
:not 伪类的优先级即为它参数选择器的优先级。:not 伪类不像其它伪类，它不会增加选择器的优先级。 - MDN

属性选择器

属性选择器是一种特殊类型的选择器，它根据元素的属性和属性值来匹配元素。它们的通用语法由方括号 ([]) 组成，其中包含属性名称，后跟可选条件以匹配属性的值。属性选择器可以根据其匹配属性值的方式分为两类：存在和值属性选择器和子串值属性选择器。 - MDN

存在属性选择器

值属性选择器

子串值属性选择器

这种情况的属性选择器也被称为“伪正则选择器”，因为它们提供类似 regular expression 的灵活匹配方式（但请注意，这些选择器并不是真正的正则表达式）- MDN

[attr^=val]

选择 attr 属性的值以 val 开头（包括 val）的元素。

[attr$=val]

选择 attr 属性的值以 val 结尾（包括 val）的元素。

[attr*=val]

选择 attr 属性的值中包含子字符串 val 的元素（一个子字符串就是一个字符串的一部分而已，例如，”cat“ 是字符串 ”caterpillar“ 的子字符串）。

🎉 （完） 🎉

📖 参考文章

🕹 CodePen

来来来，看这里 👉 https://codepen.io/nana8/pen/aXQgoj

# CSS选择器, cheatsheet, 代码片段