一、基本选择器
1,通配符选择器(*)
(1)通配符选择器是用来选择所有元素。比如下面将页面上所有元素的 margin 和 padding 都设置为 0。
1 2 3 4 |
|
(2)也可以选择某个元素下的所有元素。比如下面将 demo 里的所有元素都加上边框样式。
1 2 3 |
|
2,元素选择器(E)
用于选择指定类型的 HTML 元素,如 div、ul、li 等。
1 2 3 4 |
|
3,类选择器(.class)
(1)选择指定 class 属性值为“class”的任意类型的任意多个元素。比如下面给使用了 important 这个类名的元素设置样式。
1 2 3 4 |
|
(2)类选择器还可以结合元素选择器来使用。比如我们有好多个元素使用了类名“items”,但如果只想对使用这个类名的 p 元素上修改样式,那么可以这么写:
1 2 3 |
|
4,ID选择器(#id)
选择指定 ID 属性值为“id”的任意类型元素。比如下面选择了 id 为"first"的元素。
1 2 3 4 |
|
5,群组选择器(selector1,selector2,...,selectorN)
将具有相同样式的元素分组在一起,每个选择器之间使用逗号“,”隔开。下面代码让 .first 和 .last 使用相同的样式效果:
1 2 3 4 5 |
|
二、层次选择器
1,后代选择器(E F)
选择匹配的 F 元素,且匹配的 F 元素被包含在匹配的 E 元素内。这里 F 不管是 E 元素的子元素或者是孙元素,都将被选中。
1 2 3 |
|
2,子元素选择器(E > F)
选择匹配的 F 元素,且匹配的 F 元素是所匹配的 E 元素的子元素。
1 2 3 4 |
|
3,相邻兄弟元素选择器(E + F)
选择匹配的 F 元素,且匹配的 F 元素是紧接在匹配的 E 元素的后面。
1 2 3 4 5 6 |
|
4,通用兄弟选择器(E ~ F)
选择匹配的 F 元素,且位于匹配的 E 元素后的所有匹配的 F 元素。
1 2 3 4 5 |
|
三、属性选择器
1,E[attr]
(1)用于选取带有指定属性的元素。
1 2 3 |
|
(2)也可以使用多属性进行选择元素。
1 2 3 |
|
2,E[attribute=value]
用于选取带有指定属性和值的元素。当前也可以多个属性一起使用:
1 2 3 4 5 6 7 |
|
注意:E[attribute=value] 这种属性选择器,属性和属性值必须完全匹配,特别是对于属性值是词列表的形式时。
1 2 3 4 5 6 7 8 9 |
|
3,E[attribute~=value]
用于选取属性值中包含指定词汇的元素。同上面的完全匹配不同,这个只要属性值中有 value 就相匹配。
1 2 3 4 5 |
|
4,E[attribute^=value]
匹配属性值以指定 value 值开头的每个元素。
1 2 3 |
|
5,E[attribute$=value]
匹配属性值以指定 value 值结尾的每个元素。
1 2 3 |
|
6,E[attribute*=value]
匹配属性值中包含指定 value 值的每个元素。
1 2 3 |
|
7,E[attribute|=value]
这个选择器会选择 attr 属性值等于 value 或以 value- 开头的所有元素。
1 2 3 4 5 6 7 8 |
|
四、动态伪类选择器
之所以称为动态伪类,因为这些伪类并不存在于 HTML 中,而只有当用户和网站交互的时候才能体现出来,动态伪类包含如下两种:
- 一种是我们在链接中常看到的锚点伪类,如":link",":visited"
- 另一种被称作用户行为伪类,如“:hover”,":active"和":focus"
1,使用锚点伪类设置链接样式
要特别注意这四个锚点伪类的设置,他们是有先后顺序的。要让他们遵守一个爱恨原则 LoVe/HAte,也就是 Link--visited--hover--active。如果把顺序搞错了会样式就会出现问题。
1 2 3 4 |
|
2,使用用户行为伪类设置按钮样式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
|
五、UI元素状态伪类选择器
我们把":enabled",":disabled",":checked"伪类称为 UI 元素状态伪类,这些主要是针对于 HTML 中的 Form 元素操作,比如:
- <input type="text"/> 有 enable 和 disabled 两种状态,前者为可写状态后者为不可写状态
- <input type="radio"/> 和 <input type="checkbox"/> 有 checked 和 unchecked 两种状态。
1 2 3 4 5 6 7 |
|
六、结构伪类选择器
1,E:empty
选择没有子元素的元素,而且该元素也不包含任何文本节点
1 2 3 4 |
|
2,E:first-child
用来选择某个元素的第一个子元素,与 E:nth-child(1) 等同。
1 2 3 |
|
3,E:last-child
选择是的某个元素的最后一个子元素,与 E:nth-last-child(1) 等同。
1 2 3 |
|
4,E F:nth-child(n)
选择父元素 E 的第 n 个子元素 F。其中 n 可以是整数(1,2,3)、关键字(even,odd)、可以是公式(2n+1)。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
5,E F:nth-last-child(n)
选择父元素 E 的倒数第 n 个子元素 F。此选择器与 E:nth-child(n) 选择器计算顺序刚好相反。
其中 n 同样可以是整数(1,2,3)、关键字(even,odd)、可以是公式(2n+1)。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
6,E:only-child
选择父元素只包含一个子元素,且该子元素匹配 E 元素。
1 2 3 |
|
7,其他
- E:first-of-type:类似于 E:fisrt-child,只不过它选择父元素内具有指定类型的第一个 E 元素
- E:last-of-type:类似于 E:last-child,只不过它选择父元素内具有指定类型的最后一个 E 元素
- E:nth-of-type(n):类似于 E:nth-child(n),只不过它选择父元素内具有指定类型的第 n 个 E 元素
- E:nth-last-of-type(n):类似于 E:nth-last-child(n),只不过它选择父元素内具有指定类型的倒数第 n 个 E 元素
- E:only-of-type:类似于 E:only-child,只不过它选择父元素只包含一个同类型子元素,且该子元素匹配 E 元素
(1)如果父元素下的子元素类型都是一样的,那么上面的 *type 和 *child 选择器使用起来效果是一样的。
(2)但如果父元素下有各种子元素,那就有区别了。这里以 E:fisrt-child 和 E:first-of-type 做个比较:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
七、否定伪类选择器
匹配所有除元素 F 外的 E 元素,类似以 jQuery 中的 :not 选择器。
1 2 3 4 |
|
八、伪元素
1,::first-line
选择元素的第一行
1 2 3 4 |
|
2,::first-letter
选择文本块的第一个字母,除非在同一行里面包含一些其它元素。这个主要运用于段落排版上多。
1 2 3 4 5 6 |
|
3,::before和::after
这两个主要用来给元素的前面或后面插入内容。
(1)这个最常用的便是是清除浮动了,无需再添加一个空的 div 并应用 clear:both; 样式,只需如下样式即可在元素尾部自动清除浮动。
1 2 |
|
(2)与"content"配合使用,可以实现许多特效。比如下面样式,当鼠标移动到链接上方,链接左右会出现悬浮方括号。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
|
4,::selection
用来改变浏览网页选中文的默认效果。::selection 只能设置两个属性:一个就是 background,另一个就是 color 属性。
1 2 3 4 |
|