一、CSS选择器常见的有几种?
基本选择器
- 通配选择器 选择文档中所有的html元素，用一个
*表示 - 元素选择器 选择指定类型的的html元素
- ID选择器 选择指定ID属性值为"id"的html元素，选择的时候前面加上一个
#号 - 类选择器 选择指定class属性值为"class"的任意多个html元素，选择的时候前面加上一个
.号
层次选择器
| 选择器类型 | 选择器 | 含义 | css |
|---|---|---|---|
| 多元素选择器 | E,F | 选择匹配E元素，F元素 | 1 |
| 后代选择器 | E F | 选择匹配E元素的F子元素 | 1 |
| 子孙选择器 | E > F | 选择匹配E元素下的直接子元素F | 2 |
| 相邻兄弟选择器 | E + F | 选择匹配E元素后的直接相邻元素F | 2 |
| 通用相邻选择器 | E ~ F | 选择匹配E元素后的所有同级元素F | 3 |
伪类选择器
| 选择器 | 含义 | css |
|---|---|---|
| E:first-child | 匹配E元素的第一个子元素 | 2 |
| E:last-child | 匹配E元素的最后一个子元素 | 3 |
| E:root | 匹配E元素所在文档的根元素 | 3 |
| E:nth-child(n) | 匹配E元素的第n个子元素 | 3 |
| E:nth-last-child(n) | 匹配E元素的倒数第n个子元素 | 3 |
| E:nth-of-type(n) | 匹配父元素内具有指定类型的第n个E元素 | 3 |
| E:nth-last-of-type(n) | 匹配父元素内具有指定类型的倒数第n个E元素 | 3 |
| E:first-of-type | 匹配父元素内具有指定类型的第一个E元素 | 3 |
| E:last-of-type | 匹配父元素内具有指定类型的最后一个E元素 | 3 |
| E:only-child | 匹配父元素内只包含一个子元素，且该子元素匹配E元素 | 3 |
| E:only-of-type | 匹配父元素内只包含一个同类型的子元素，且该子元素匹配E元素 | 3 |
| E:empty | 匹配没有子元素的元素，且该元素五任何文本节点 | 3 |
| E:link | 匹配未被访问过的超链接 | 1 |
| E:visited | 匹配被访问过的超链接 | 1 |
| E:active | 匹配鼠标已经其上按下、还没有释放的E元素 | 1 |
| E:hover | 匹配鼠标停留其上的E元素 | 1 |
| E:focus | 匹配获得焦点的E元素 | 2 |
| E:lang(language) | 匹配指定了lang属性且值为language的E元素 | 2 |
| E:not(F) | 匹配所欲除F元素外的E元素 | 3 |
| E:checked | 匹配表单中被选中的radio（单选框）或checkbox（复选框）元素 | 3 |
| E:disabled | 匹配表单中禁用的元素 | 3 |
| E:enabled | 表单中激活的元素 | 3 |
| E:target | 匹配文档中特定"id"点击后的效果 | 3 |
伪元素选择器
伪元素可用于定位文档中包含的文本，为与伪类进行区分，伪元素使用双冒号 :: 定义，但单冒号 : 也能被识别。
| 选择器 | 含义 | css |
|---|---|---|
| ::first-letter | 用来选择文本块的第一个字母 | 1 |
| ::first-line | 用来选择元素的第一行文本 | 1 |
| ::before和::after | 不是指存在标记中的内容，而是可以插入额外内容的位置，需要配合content属性使用 | 2 |
| ::selection | 用来匹配突出显示的文本 | 3 |
属性选择器
| 选择器 | 含义 | css |
|---|---|---|
| E[attr] | 匹配所有具有属性attr的E元素 | 2 |
| E[attr=val] | 匹配具有属性attr，attr值为val的元素，val区分大小写 | 2 |
| E[attr~=val] | 匹配具有属性attr，attr值具有多个空格分隔、其中一个值等于value的元素 | 2 |
| E[attr*=val] | 匹配具有属性attr，attr值的任意位置包含了val的元素 | 3 |
| E[attr^=val] | 匹配具有属性attr，attr值以val开头的任何字符串的元素 | 3 |
| E[attr$=val] | 匹配具有属性attr，attr值以val结尾的任何字符串 | 3 |
选择器的优先级是怎样的?
关于优先级的规定，常用的方法是给不同的选择器分配权值：
!important
内联样式
id选择器 100
类选择器 10
伪类选择器 10
属性选择器 10
标签选择器 1
通配符选择器
浏览器自定义
- 权值较大的优先级越高
- 权值相同的，后定义的优先级较高
- 样式值含有！important，优先级最高
后代选择器的定位原则
后代选择器，浏览器是如何查找元素的呢？
浏览器CSS匹配不是从左到右进行查找，而是从右到左进行查找。
比如DIV#divBox p span.red{color:red;}，浏览器的查找顺序如下：先查找html中所有class='red'的span元素，找到后，再查找其父辈元素中是否有p元素，再判断p的父元素中是否有id为divBox的div元素，如果都存在则匹配上。
浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。
如果遇到一个属性想知道兼容性，在哪查看?
可以去Can I use查询
网友评论