- 首先列举各种选择器, 之后描述作用以及个人认为有坑的地方
- 叫法这个东西并不是唯一的, 自己能记住和理解怎么回事就行,一个名字而已
- E,F并不单单指元素, 也可以是类,或ID
- 描述如果不形容的不够通俗, 下面会有大白话, 有图有XX
- 我不是专业前端但是对前端感兴趣, 有不对的地方欢迎指正
(一) 元素选择器
| 元素选择器 | 含义 |
|---|---|
| E | 标签选择器 |
| E#id | ID选择器 |
| E.class | 类选择器 |
| * | 通配选择器 |
(二) 关系选择器
关系选择器 | 名称 | 描述
--- |---
E F | 选中E元素的所有后代元素
E,F | 同时选中E元素和F元素
E>F | 只选中第一代后代元素(只有儿子可以, 孙子不行)
E+F | 只选中E元素同级的下一个元素
E~F | 只选中E后面的F元素
(三) 属性选择器
| 属性选择器 | 描述 | |
|---|---|---|
E[attr] |
选择有属性attr的E元素 |
|
E[attr='val'] |
选择有attr属性值为val的E元素 | |
E[attr^='val'] |
选择attr属性值以val开头的E元素 | |
E[attr$='val'] |
选择attr属性值以val结尾的E元素 | |
E[attr*='val'] |
选择attr属性值里含有val的E元素 | |
E[attr~='val'] |
选择attr属性值里有val的E元素, val必须是完整单词 | |
| E[attr | ='val'] | 选择attr属性以val开头的E元素, val必须是完整单词 |
(四) 伪类选择器
| 伪类选择器 | 描述 |
|---|---|
a:link |
选择未被访问的链接 |
a:visited |
选择已被访问过的链接 |
a:active |
选择活动时的链接(鼠标按下到释放之间的时候) |
a:hover |
选择鼠标放上去的时候的链接 |
以上四种伪类选择器目前只知道适用于a标签
| 伪类选择器 | 描述 |
|---|---|
E:focus |
选择获取焦点的E元素 |
E:first-letter |
选择E元素里的首字母(汉字的话就是第一个汉字) |
E:first-line |
选择E元素的第一行 |
E:before |
E元素内部的最前面插入内容并设置样式 |
E:after |
E元素的内部的最后面插入内容并设置样式 |
E:lang(val) |
选择lang属性以val开头的E元素 |
E:first-child |
选择是其父元素的第一个子元素的E元素 |
E:last-child |
选择是其父元素的最后一个子元素的E元素 |
E:nth-child(N) |
选择是其父元素的第N个子元素的E元素 |
E:nth-last-child(N) |
选择是其父元素的倒数第N个子元素E元素 |
E:only-child |
选择是其父元素唯一的子元素的E元素 |
E:first-of-type |
选择是其父元素的子元素里第一个E元素的E元素 |
E:last-of-type |
选择是其父元素的子元素里最后一个E元素的E元素 |
E:nth-of-type(N) |
选择是其父元素的子元素里的第N个E元素的E元素 |
E:nth-last-of-type(N) |
选择是其父元素的子元素里的倒数第N个E元素的E元素 |
:root |
选择文档的根元素 |
:empty |
选择没有子元素的 |
:target |
选择当前活动的元素 |
:enabled |
选择启用的表单元素 |
:disabled |
选择禁用的表单元素 |
:checked |
选择被选中的表单元素 |
:not(selector) |
选择不是selector的元素 |
::selection |
选择鼠标选取的时候的元素 |
以下说一下个人觉得在使用可能有坑的地方
- 注意
E F和E>F的区别:
-
E F: 只要F是E的后代元素(无论第几代)都被选中 -
E>F: F必须是E的第一代子元素, 也就是说, 只有儿子会被选中, 孙子都不好使!
-
E+F会只选择E元素后面的第一个F元素(这个没什么好说的, 不过W3C给的释 义是E后面的所有F元素, 这是不正确的, 下面上图)注意p2并没有红色的边框 E~F:选中E后面的同级元素F
在li元素前面的p标签并没有被选中
li的子元素p标签也没有被选中
-
p1, p2, p3都被选中了, 说明只要在E之后的F元素就会被选中, 间隔其它的元素也无所谓
E~F
:focus: 很遗憾, 目前这个属性在Mac OS X系统上的Chrome浏览器和Safari浏览器里效果并不是很好, Mac OS X系统上, 当input元素获取焦点的时候,系统会自动给一层蓝色的框, 影响了我们要的效果:first-letter: 第一个字母会被选中
-
如果是汉字的话, 第一个汉字会被选中
第一个字母被选中 - 如果句子如: I'm the first line! 这样,
I后面的分号'也会被选中
分号也被选中
-
:first-line: 选中第一行
first-line -
:before: 在元素内部的前面插入(:after同理)
注意控制台里的结构 -
:nth-child(N): 是其父元素的第N个子元素, 注意这里的N从1开始数!
nth-child -
:only-child: 其父元素的唯一子元素, 也就是说, 选中的这个元素, 它的父元素必须只能有选中的这个元素这个唯一的一个字元素, 不能再有其它子元素, 就是它的父元素不能有二胎! 它就是独苗!
没有二胎的 :nth-of-child(N): 这个没什么好说的, 和:nth-child(N)类似, 注意 N也是从第一个开始数, 也就是说, 想选择第一个就写成::nth-of-child(1):root: 选择文档的根元素, 实际就是html标签:empty: 选择没有子元素的,这个有几个地方需要注意一下
- 空格是不可有的
-
换行也是不可以有的
原效果
有空格
有换行
-
:target: 选择当前活动的元素, 这个选中的对象相当于a标签的锚点,只有点击了链接以后, 这个属性就被激活了, 然后CSS效果才会有效. 另外就是, 刷新页面也是没用的, 这个链接你访问过, 刷新以后仍然处于激活状态, 所以样式依然有效
-
::selection: 选择鼠标选取的时候的元素
> 就相当于鼠标选择的时候, 比如要复制某些网页上的文字的时候
> 另外就是这个必须以两个冒号开头, 否则无效.
(完)
