常用CSS选择器速查表

常用CSS选择器速查表

查看完整选择器列表,详见Selectors Level 3
PS: *选择器要慎用,因为它是性能最低的一个CSS选择器

模式 解释 初次定义的CSS版本
* 任意元素 2
E 类型为E的元素 1
E[foo] 类型为E,且具有属性foo的元素 2
E[foo=”bar”] 类型为E,且属性foo值为bar的元素 2
E[foo~=”bar”] 类型为E,且属性foo的值以空格分隔为值列表,列表中具有bar值的元素E 2
E[foo^=”bar”] 类型为E,且属性foo值以bar开头的元素 3
E[foo$=”bar”] 类型为E,且属性foo值以bar结尾的元素 3
E[foo*=”bar”] 类型为E,且属性foo值包含子字符串bar的元素 3
E[foo|=”en”] 类型为E,且属性foo值以连字符“-”分隔成列表后,列表以en开头的元素 (|是 (竖)html 转义, 部分 md 转换有问题)[^1] 2
E:root 类型为E,且是文档的根元素 3
E:nth-child(n) 类型为E,且它是父元素的第n个子元素 3
E:nth-last-child(n) 类型为E,且它是父元素的倒数第n个元素 3
E:nth-of-type(n) 类型为E,且它是所有E兄弟元素的第n个 3
E:nth-last-of-type(n) 类型为E,且它是所有E兄弟元素的倒数第n个 3
E:first-child 类型为E,且它是父元素的第1个子元素 2
E:last-child 类型为E,且它是父元素的倒数第1个子元素 3
E:first-of-type 类型为E,且它是所有E兄弟元素中的第1个 3
E:last-of-type 类型为E,且它是所有E兄弟元素中的倒数第1个 3
E:only-child 类型为E,且它是父元素的唯一子元素 3
E:only-of-type 类型为E,且它是兄弟元素中的唯一一个类型为E的元素 3
E:empty 类型为E,且它没有子元素(包括文本元素) 3
E:link 作为超链接的元素E 1
E:visited 被执行了用户动作visited的元素E 1
E:active 被执行了用户动作active的元素E 1 and 2
E:hover 被执行了用户动作hover的元素E 1 and 2
E:focus 被执行了用户动作focus的元素E 1 and 2
E:target 相关URI目标的元素E 3
E:lang(fr) 使用语言fr的元素E 2
E:enabled 被enable的交互元素E 3
E:disabled 被disabled的交互元素E 3
E:checked 被checked过的交互元素E 3
E::first-line 元素E的首行字符 1
E:first-letter 元素E的首个字符 1
E::before 元素E的before伪元素 2
E::after 元素E的after伪元素 2
E.warning 类为warning的E元素 1
E#myid id为myid的E元素 1
E:not(s) 不满足选择器条件s的E元素 2
E F 元素E的所有后代F元素 1
E > F 元素E的所有子F元素 2
E + F 元素E的紧邻F兄弟元素 2
E ~ F 元素E的兄弟F元素 3

markdwon 的表格中需要竖线“|”这样的特殊符号,咋办?

1
2
3
4
5
6
7
那就只能用html字符实体了:
|
|
|
|
|
这五个,任选一个吧~

[^1]: markdwon 的表格中需要竖线“|”这样的特殊符号,详见:

转自 : https://yanyinhong.github.io/2017/04/30/CSS-selector-cheat-sheet/

-------------本文结束感谢您的阅读-------------

本文标题:常用CSS选择器速查表

文章作者:YaFey

发布时间:2017年06月15日 - 19:06

最后更新:2017年06月15日 - 22:06

原始链接:https://hyf.js.org/blog/2017-06-15.2017-06-css-selector-cheat-sheet/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

如果我的文章让你有收获,请支持一下!
0%