-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path笔记4.txt
117 lines (99 loc) · 3.47 KB
/
笔记4.txt
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
1.元素之间的关系
- 父元素
- 直接包含子元素的元素我们称为是父元素
- 子元素
- 直接被父元素包含的元素我们称为子元素
- 祖先元素
- 直接或间接包含后代元素的元素我们称为祖先元素（父元素也是祖先元素）
- 后代元素
- 直接或间接被祖先元素包含的元素我们称为后代元素（子元素也是后代元素）
- 兄弟元素
- 拥有相同的父元素的元素称为兄弟元素
2.选择器
- 后代元素选择器：
- 作用：选择指定元素的指定后代元素
- 语法：祖先元素 后代元素
- 例子：div p{}
- 这样会选取所有的在div中的p元素
- 子元素选择器：
- 作用：选择器指定元素的指定子元素
- 语法：父元素 > 子元素
- 例子：div > p{}
- 会选中所有的div的子元素p
- 兄弟元素选择器：
- 作用：选择指定元素的后一个兄弟元素或者后边所有的兄弟元素
- 语法：前一个 + 后一个
- 例子：div + p{}
- 选中紧挨着div后边的p元素
- 语法：前一个 ~ 后一个
- 例子: div ~ p {}
- 选择div后边所有的p兄弟元素
- 伪类选择器
- 伪类实际是在表示元素正在处于某种状态
- 伪类：
:link --> 表示一个正常没有被访问过的链接。
:visited --> 表示访问过的链接
:hover --> 表示鼠标正在滑过的链接
:active --> 鼠标正在点击的链接
:focus --> 表示获取焦点的状态
:after --> 选中元素最后边这部分
:before --> 选中元素最前边这部分
- 使用after和before时，我们可以使用一个content属性，可以向元素中添加一个指定的内容
::selection --> 表示正在被选中的文字内容
- 注意：火狐中需要使用：::-moz-selection
:first-letter --> 选中段落中的第一个字母
:first-line --> 选中段落的第一行
:first-child --> 选中第一个子元素
例子： p:first-child{}
- 选中页面中的所有第一个子元素p
- 这里指的子元素，指的是在父元素中的所有子元素进行排序
:last-child
- 选中页面中最后一个子元素
:nth-child
- 选中页面中指定位置的子元素
- 例子：p:nth-child(3){}
- 找到p元素同时p元素是其父元素的第三个子元素
- 可以在nth-child中传递一个even或odd作为位置，这样可以选中页面中偶数或奇数位置的子元素
:first-of-type
:last-of-type
:nth-of-type
- 上边三个伪类和first-child last-child类似
只不过它们的排序只按照同一个元素进行排序
:not()
- 否定伪类可以将一些元素剔除出去
- 例子：p:not(.p1)
- 选中所有的p元素，除了class属性值为p1
- 属性选择器：
- 可以根据元素的属性值去选择元素
- 语法：
1.[属性名]
- 选中含有指定属性的元素
2.[属性名=属性值]
- 选中属性名等于指定属性值的元素
3.[属性名^=属性值]
- 选中属性值以指定内容开头的元素
4.[属性名$=属性值]
- 选中属性值以指定内容结尾的元素
5.[属性名*=属性值]
- 选中属性值中包含指定内容的元素
3.样式的继承
- 在CSS中，祖先元素的样式会同时设置到后代元素上，这一特性我们称为是样式的继承。
- 所以基于该特定，当有一些样式我们需要为很多元素设置时，我们不用一个一个设置，
可以直接将该样式设置给他们的祖先元素，这一样式会自动应用他们身上。
- 但是，并不是所有的样式都会继承，比如：背景相关的样式都不会继承！
- 继承来的样式没有优先级！
4.选择器的优先级（权重）
- 当我们为一个元素同时设置多个相同的样式时，这里就会有一个优先级的问题
这么多的样式我们到底要应用那个样式，由选择器的优先级决定。
- 优先级的排序：
1.!important --> 如果为一个样式添加了一个important，则该样式会优先于所有的样式显示！
2.内联样式 --> 优先级是 1000
3.id选择器 --> 优先级是 100
4.类和伪类选择器 --> 优先级 10
5.元素选择器 --> 优先级 1
6.通配选择器(*) --> 优先级 0
7.继承的样式 --> 没有优先级
- 当使用不同的选择器设置相同的样式时，需要根据选择器的优先级来决定应用那个样式，
它需要将所有的选择器的优先级相加，然后比较，优先级大的优先显示。
如果优先级相同，则使用靠后的样式。
- 注意：优先级的相加不会超过选择器的最大数量级！