我对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) { }

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

本文转载于:猿2048https://www.mk2048.com/blog/blog.php?id=h1h2cib&title=我对CSS选择器的认识

我对CSS选择器的认识相关推荐

CSS 选择器：BeautifulSoup4解析器
和 lxml 一样,Beautiful Soup 也是一个HTML/XML的解析器,主要的功能也是如何解析和提取 HTML/XML 数据. lxml 只会局部遍历,而Beautiful Soup 是基 ...
最常用的css选择器及兼容性 +几个好用却不多见的 nth-child等
你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远远不是css的全部.下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题.掌握了它们,才能真正领 ...
css 选择器伪元素_CSS伪元素-解释选择器之前和之后
css 选择器伪元素选择器之前 (Before Selector) The CSS ::before selector can be used to insert content before t ...
Spoooooky CSS 选择器
2019独角兽企业重金招聘Python工程师标准>>> 让我们今年有一些万圣节主题的帖子精神!我会从超过 GRAVE.eR.CSS选择器中挑选一些将冻结你骨头的选择器.也许不可能,但 ...
如何提升 CSS 选择器的性能？
CSS选择器对性能的影响源于浏览器匹配选择器和文档元素时所消耗的时间,所以优化选择器的原则是应尽量避免使用消耗更多匹配时间的选择器.而在这之前我们需要了解CSS选择器匹配的机制, 如子选择器规则: # ...
谈一谈浏览器解析CSS选择器的过程【前端每日一题-6】
谈一谈浏览器解析CSS选择器的过程? 这是一道发散题,可以根据自己的理解自行解答. 在开始前,我们必须了解一个真相:为什么排版引擎解析 CSS 选择器时一定要从右往左解析? 简单的来说:浏览器从右到左 ...
css 选择器（标签选择器、类选择器、层级选择器、id选择器、组选择器、伪类选择器、通配符选择器）
css 选择器的定义 css 选择器是用来选择标签的,选出来以后给标签加样式. css 选择器的种类标签选择器类选择器层级选择器(后代选择器) id选择器组选择器伪类选择器通配符选择器标 ...
CSS选择器和参考手册
CSS的基本语法选择器:通过选择器可以选中页面中的指定元素.声明块:通过声明块来指定元素设置样式.声明块由一个一个的声明组成声明是由一个名值对结构:一个样式名对应一个样式值,名和值之间以:连接,以; ...
10-CSS基础-CSS选择器
CSS选择器标签选择器什么是标签选择器? 作用: 根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性格式: 标签名称{属性:值; } 注意点: 标签选择器选中的是当前界面中所 ...
调研CSS选择器在浏览器中的支持情况
网上有很多这样的信息,很多的图表对各个浏览器进行比较,关于特性的支持,其实有些不全面,本文就日常常见的一些css选择器进行一个总结(本文在标准模式下). 1)关于:active,:link,:hove ...

我对CSS选择器的认识

我对CSS选择器的认识

一、简述

二、归纳

1. 特征选择器：

2. 关系选择器

我对CSS选择器的认识相关推荐

最新文章

热门文章