1.html负责结构 css负责样式 js负责行为
2.选择器
(1)标签:就是标签的名字!
(2)id选择器 :#id名字,同一页面的id不能重复、区分大小写、可以是字母数字下划线。
(3)类选择器:.class名字,class可以重复、同一个标签可以属于多个类 用空格隔开。
最好让一个标签多携带几个类去实现样式。
尽可能的用class,除非极特殊的情况可以用id。原因:id是js用的。也就是说,js要通过id属性得到标签,所以我们css层面尽量不用id,要不然js就很别扭。另一层面,我们会认为一个有id的元素,有动态效果。类上样式 id上行为。
(4)后代选择器:“.div1 p ” 加空格 div1里面的p元素 ,只是后代 不是儿子,描述的是一种祖先结构。
(5)交集选择器:“div.h1”不加空格 描述的是交集中的。(一般以标签开头+类名,ie7开始兼容)
(6)并集选择器:用逗号就表示并集。"h1,ul"
(7)通配符:*就表示所有元素。效率低 页面上不能出现。
*{color:red;}
(8)儿子选择器:div>p{color:red;} div的儿子p。和div的后代p的截然不同。
(9)序选择器: ul li:first-child{color:red;} ul li:last-child{color:blue;}
(10)下一个兄弟 :+表示选择下一个兄弟 h1+p 每个h1后面的p
3.继承性:
哪些属性能继承?color、text-开头的、line-开头的、font-开头的文字属性,所有关于盒子的、定位的、布局的属性都不能继承。
4.层叠性:
id的数量,类的数量,标签的数量(不进位,实际上能进位:255个标签,等于1个类名,但是没有实战意义!)
1)先看有没有选中,如果选中了,那么以(id数,类数,标签数)来计权重。谁大听谁的。如果都一样,听后写的为准。
2)如果没有选中,那么权重是0。如果大家都是0,就近原则。
下列都是IE6兼容的选择器:
p
#box
.spec
div.box
div .box
div , .box
*
下列都是IE7开始兼容:
div>p
div+p
下列都是IE8开始兼容:
divp:first-child
divp:last-child