一.选择器

1.属性选择器:
E{...}:对所有的E元素起作用
E[attr]:对所有包含attr属性的E元素起作用
E[attr=value]：对所有attr等于value的E元素起作用
E[attr ~=value]:html中的attr可以有多个值(空格隔开)，如果有某一个值为value,那么这个样式就会起作用
E[attr *= value]:只要attr中包含value子串，就起作用
E[attr ^= value]:如果attr以value开头，则起作用

2.id和class选择器:
E#idVal {...}:对id为idVal的E元素起作用:     div#divDemo
E.classVal{...}:对class值为classVal的E元素起作用:   div.classDemo

3.包含选择器:
Selector1 Selector2{...}:
例子：div .a{ width : 80% }:对处于<div>元素之内并且class属性为a的元素起作用(注意与E[attr=value]对比)

4.子选择器:
Selector1 > Selector2 {...}:
例子:div > .a { width : 80%}：只会对div元素的直接子元素的class属性含有a的元素起作用
<div>
<section>
<p class='a'></p>
</section>
</div>
比如这种情况，p元素虽然有class='a',但是p不是div的直接子元素，所以不会起作用

5.兄弟选择器:
Selector1 ~ Selector2{...}:

6.选择器组合：
如果需要让一份css样式对多个选择器起作用，那么就需要用到选择器组合
Selector1,Selector2,Selector3...{...}:
例子：div,.a,#idVal { width : 80% }