CSS
1
2
| <!-- --> HTML注释
/* */ CSS注释
|
基本语法
元素选择器
1
2
3
4
| 元素选择器 {
属性1:属性值1;
...
}
|
ID选择器
1
2
3
4
| #ID选择器 {
属性1:属性值1;
...
}
|
类选择器
1
2
3
4
| .类选择器 {
属性1:属性值1;
...
}
|
多类选择器
1
2
3
4
| .类选择器1.类选择器2... {
属性1:属性值1;
...
}
|
伪类选择器
1
2
3
4
| 选择器:伪类 {
属性1:属性值1;
...
}
|
伪类
1
2
3
4
5
6
7
| :active 被激活的元素
:hover 鼠标悬浮元素上方
:link 未被访问的链接
:visited 被访问的链接
:focus 被选中的元素
:first-child 每一层元素指定类型的第一个子元素
:lang 带有指定lang属性的元素
|
伪元素选择器
1
2
3
4
| 选择器:伪元素 {
属性1:属性值1;
...
}
|
伪元素
1
2
3
4
| :first-letter 文本第一个字符
:first-line 文本首行
:before 选择器选择元素之前
:after 选择器选择元素之后
|
通用选择器
交集选择器
样式重叠 都具有
1
2
3
4
| 元素选择器.类选择器 | #ID选择器 {
属性1:属性值1;
...
}
|
并集选择器
集体声明
1
2
3
4
5
6
| 选择器1,
选择器2,
... {
属性1:属性值1;
...
}
|
后代选择器
1
2
3
4
| 选择器1 选择器2 ... {
属性1:属性值1;
...
}
|
子元素选择器
1
2
3
4
| 选择器1> 选择器2 {
属性1:属性值1;
...
}
|
相邻兄弟选择器
1
2
3
4
| 选择器1+选择器2 {
属性1:属性值1;
...
}
|
属性选择器
1
2
3
4
| 属性选择器1属性选择器2... {
属性1:属性值1;
...
}
|
常见属性选择器
1
2
3
4
5
6
7
| [属性] 带有指定属性的元素
[属性=值] 带有指定属性和值的元素
[属性~=值] 属性值包含指定值的元素，完整单词
[属性|=值] 属性值以指定值开头，完整单词或后带有'-'连接符
[属性^=值] 属性值以指定值开头的元素
[属性$=值] 属性值以指定值结尾的元素
[属性*=值] 属性值中包含指定值的元素
|
应用到HTML的方式
- 行内式
<标签名 style="属性名1:属性值1;..." ...>
内嵌式
1
2
3
4
5
6
| <style type="text/css">
选择器 {
属性1:属性值1;
...
}
</style>
|
链接式
1
| <link rel="stylesheet" type="text/css" href="*.css" />
|
