css选择器总结

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伪类选择器则无这个限制