1.元素选择器
p{ color: orange }
2.选择器分组与声明分组
h1,h2,h3,h4,h5,h6{ margin:0; padding:0 }
3.类选择器
.article{ text-indent: 40px; }
4.ID选择器
#submit{ background-color: blue }
ID选择器不能结合使用，因为ID属性不允许有以空格分隔的词列表
5.属性选择器
img[alt] 简单属性选择
a[num="1"] 根据具体属性值选择，要求顺序一致
p[class~="warning"] 根据部分属性值选择
6.后代选择器
ul li{ float: left; } 必须为祖先后代关系
7.选择子元素
p > span { text-weight: bold; } 必须为父子关系
8.选择兄弟元素
li + li{ text-decoration: none; } 选择在这个元素后出现的所有的兄弟元素，用一个结合符只能选择两个相邻兄弟中的第二个元素
9.伪类选择器
-
链接伪类
a:link { color: silver }
a:visited{ text-decoration: line-through; }
-
动态伪类
input:focus{ background-color: silver; }
input:hover{ border: 1px solid silver; }
a:active{ color: orange; }
伪类的顺序很重要，通常的建议是link visited focus hover active
动态伪类不应该改变元素的大小，这样会重绘文档
-
静态伪类
p:first-child{ color: red; } 选择第一个子元素
-
结合伪类
a:link:hover{ color: red; } 未访问悬浮
a:visited:hover{ color: orange; } 已访问悬浮
10.伪元素选择器
- 选择首字母
p:first-letter{ font-size: 150%; } - 选择第一行
p:first-line{ text-indent: 40px; } - 在之前之后添加元素
h1:before{ content: "{{"; color: silver; }
h1:after{ content: "}}" color: silver; } - 所有伪元素必须放在出现该伪元素的选择器的最后面
- 而p:hover span伪类选择器则无这个限制
