css选择器

基本选择器

* : 通用选择器，可以适用于任何的元素，一般用来消除一个默认的css样式

E ：标签选择器，匹配使用E标签的所有对象

.class：匹配使用class名称的元素

id：匹配使用id名称的元素

* { margin:0; padding:0; }   //使用统配消除所有的内外边距
p { font-size:2em; }         //  匹配所有的p元素
.class { background:#ff0; }         //匹配所有class属性名称为class的元素
p.class { background:#ff0; }           //匹配所有class属性名称为class的p元素
p.class.class1 { color:#900; font-weight:bold; }  //匹配所有class属性名称同时为class和class1的p元素
#id { background:#ff0; }   //匹配id名称为id的元素
p#id { background:#ff0; }   //匹配id元素为id的p标签

多元素选择器

e,f : 多元素选择器 ，匹配e和f的选择器

e f : 后代选择器，匹配所有属于e的f选择器，福泽万代（只要f属于e的后代都可以，不管几代孙）

e>f : 子元素选择器，匹配所有的属于e元素的子f元素，不包括孙子元素，只适用于子元素，福泽一代而尽

e+f： e元素之后的的第一个f元素

e~f ： 和e元素拥有同一个父元素的所有f元素

div p { color:#f00; }     //所有div内的所有p元素
#nav li { display:inline; }    //所有id名称为nav元素中的所有li元素
div > strong { color:#f00; }         //div元素的子元素中为strong的元素
p + p { color:#f00; }           //所有p元素的后一个同级p元素

伪类(因为类别较多，只介绍一部分，如果不是专攻前端，足够使用)

e:first-child :如果e元素的父元素的第一个子元素为e则生效，如果第一个子元素为其他元素则不生效

e​ : link: 所有未被点击的元素

e:visited:所有已经被你点击的元素

e:active:鼠标已经按上，却没有松开

e:hover:匹配悬停的元素

e:focus:匹配获得当前焦点的e元素

e:before: 在e元素的前面插入的属性

e:after : 在e元素之后插入的属性