我对CSS选择器的认识

李世赞发布于2019-04-23 13:27 / 3422人阅读

摘要：还有两个选择器是功能性的，它们可以给元素已有内容之前或之后添加新内容。我做了一个项目，里面包含一个测试选择器的小功能，请看这里。二归纳下文中所有的都代表任何一个有效的选择器。

我对CSS选择器的认识

一、简述　　

　　CSS选择器是对HTML元素进行选择的筛选条件，大概可以分为两类：

特征选择器——根据元素自身所具有的某种特征进行筛选，比如名称、ID、属性等；
关系选择器——根据元素与其他元素的关系进行筛选，比如子元素、兄弟元素等；

　　在真正使用的时候，几个简单的选择器可以组合成更复杂的选择器，所以谁也说不上CSS选择器有多少。还有两个选择器是功能性的，它们可以给元素已有内容之前或之后添加新内容。　

　　我做了一个项目，里面包含一个测试CSS选择器的小功能，请看这里。

二、归纳

　　下文中所有的 SELECTOR 都代表任何一个有效的选择器。

　　1. 特征选择器：

描述	选择器	备注
1. 无论有什么特征——即全部	* { }
2. 元素名称是 "element"	element { }
3. 具有类名 "className"	.className { }
4. 具有id名 "someID"	#someID { }
5. 带有属性 attr	SELECTOR[attr] { }
6. 带有属性 attr，且属性值为 "value"	SELECTOR[attr="value"] { }
7. 带有属性 attr，且其若干个属性值中有一个是 "value"	SELECTOR[attr~="value"] { }
8. 带有属性 attr，且其属性值包含字符串 "str"	SELECTOR[attr*="str"] { }
9. 鼠标正位于其上方	SELECTOR:hover { }
10. SELECTOR 是个独生子——它的父元素只有它这一个子元素	SELECTOR:only-child { }
11. SELECTOR 是其父亲的第一个子元素	selector:first-child { }
12. SELECTOR 是其父亲的第 N 个子元素	selector:nth-child(N) { }
13. SELECTOR 是其父亲的最后一个子元素	selector:last-child { }
14. SELECTOR 内部是真空——连空格都没有	SELECTOR:empty { }
15. SELECTOR 被某个链接锚定了，而且该链接被点击了	SELECTOR:target { }	<a href="#topic">跳转到 SELECTOR 处a>
16. SELECTOR 中被用户通过鼠标拖动选中的内容	SELECTOR::selection { }
链接专有的特征
17. 未被访问的链接	a:link { }
18. 已被访问的链接	a:visited { }
19. 正在被点击的链接	a:active { }
表格元素专有的特征
20. 目标是启用的	SELECTOR:enabled { }
21. 目标是禁用的	SELECTOR:disabled { }
22. 目标是被选中的（单选框、复选框）	SELECTOR:checked { }
23. 目标获得了焦点	SELECTOR:focus { }	能接收用户输入的元素，当它正在接收时，就获得了焦点。
两个功能性选择器
24. 给 SELECTOR 的内容之前加上些东西	SELECTOR:before { }
25. 给 SELECTOR 内容之后加上些东西	SELECTOR:after { }

　　2. 关系选择器

描述	选择器	备注
1. SELECTOR1 和 SELECTOR2	SELECTOR1, SELECTOR2 { }
2. 位于 SELECTOR1 之后的所有兄弟元素 SELECTOR2	SELECTOR1~SELECTOR2 { }
3. 与 SELECTOR1 紧邻着的 SELECTOR2 元素	selector1+selector2 { }
4. SELECTOR 的首字母	selector:first-letter { }	类似的还有 SELECTOR:first-line { }
5. SELECTOR1 的所有子元素 SELECTOR2	selector1>selector2 { }
6. SELECTOR1 的所有后代元素 SELECTOR2	selector1 selector2 { }
7. 所有不是 SELECTOR2 的 SELECTOR1	SELECTOR1:not(SELECTOR2) { }

　　个人浅薄之见，肯定有不到之处，希望得到有心之人指正，谢谢！

GPU云服务器云服务器 css选择 css选择器基础选择器css 服器的负载均衡

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1903.html

CSS: hover选择器的使用

摘要：有些时候需要用到和这两个鼠标事件，但是写又比较麻烦，还要添加监听事件，所以能用解决的东西尽量解决，这样可以提高性能，下面说一下我对的了解之前在学计算机应用的时候，老师教我们使用了选择器来完成下拉菜单，之前只知道怎么使用，并不知道为什么要这么有些时候需要用到mouseover和mouseout这两个鼠标事件，但是写js又比较麻烦，还要添加监听事件，所以能用css解决的东西尽量yongc...

Prasanta 2019-08-01 18:05 评论0 收藏0
CSS: hover选择器的使用

摘要：有些时候需要用到和这两个鼠标事件，但是写又比较麻烦，还要添加监听事件，所以能用解决的东西尽量解决，这样可以提高性能，下面说一下我对的了解之前在学计算机应用的时候，老师教我们使用了选择器来完成下拉菜单，之前只知道怎么使用，并不知道为什么要这么有些时候需要用到mouseover和mouseout这两个鼠标事件，但是写js又比较麻烦，还要添加监听事件，所以能用css解决的东西尽量yongc...

joyvw 2019-08-29 13:54 评论0 收藏0
编写高效的 CSS 选择器 – CSS魔法

摘要：最基本的选择器是元素选择器比如选择器比如还有类选择器比如。选择器和类选择器在速度上的差异基本上没有关系。现在我们回到讨论开始的地方，哪类选择器是最高效的哪个是会影响选择器效率的关键选择器写代码的时候，关键选择器是能否高效的决定因素。高效的CSS已经不是一个新的话题了，也不是我一个非得重拾的话题，但它却是我在工作之时，所感兴趣的，关注已久的话题。有很多人都忘记了，或在简单的说没有意识...

forrest23 2019-08-02 16:16 评论0 收藏0
编写高效的 CSS 选择器 – CSS魔法

摘要：最基本的选择器是元素选择器比如选择器比如还有类选择器比如。选择器和类选择器在速度上的差异基本上没有关系。现在我们回到讨论开始的地方，哪类选择器是最高效的哪个是会影响选择器效率的关键选择器写代码的时候，关键选择器是能否高效的决定因素。高效的CSS已经不是一个新的话题了，也不是我一个非得重拾的话题，但它却是我在工作之时，所感兴趣的，关注已久的话题。有很多人都忘记了，或在简单的说没有意识...

hyuan 2019-08-30 10:50 评论0 收藏0
论 CSS 中的逻辑

摘要：天生缺乏逻辑性的问题导致了预处理器的出现。这会导致圈复杂度问题。圈复杂度对于来说可能是一种比较高阶的原则，但如果我们通过它来考量那些蕴含在我们写的选择器中的逻辑性，那我们也许就能写出更加优秀的代码。本文在征得原作者 @csswizardry 同意的情况下，翻译自他博客中的文章：Cyclomatic Complexity: Logic in CSS。最初发布于我的个人博客：咀嚼之...

PiscesYE 2019-08-28 18:11 评论0 收藏0