高手请进！关于CSS中class选择器使用多种样式的问题

html-css041

高手请进！关于CSS中class选择器使用多种样式的问题,第1张

这是class类别选择器的一种简单应用，class="style1 style2"也就是使用style1与style2所有样式的并集，但是需要注意的是：这个是有顺序的，class="style1 style2"首先载入style1里面的样式，然后再载入style2的，如果style1与style2里面有相同的属性，但是他们的值不同，比如：style1里面有color:red而style2里面有color:green那么最终的值就是后面的那个color:green，如果你要使用（<div class="style1"></div>或<div class="style2"></div>）这样的样子，只需把二者里面的内容放到一个里面就行了，顺便注意一下前面说到的问题就行了

首先你要理解css命名规则

<div class="a1"><ul></ul></div>

如果你想定义这个ul的样式，可以直接ul

例如: ul {list-style-type: disc}

但是这样定义太广泛了，这个是让所有的ul行开始符都变成个点。

如果这个页面还有其他ul，也会受到影响

为了精确的定义这个div下的ul，你需要这样定义

.a1 ul {list-style-type: disc}

这样的意思就是类a1下的ul样式是个点，这样不会影响到其他ul的样式

很明显，这个命名规则是这样，在你要定义的样式前加上父级的类名，来相信的指认你定义的样式是属于哪的。 你可以在前面加上无数个父级类名来区分你设置的样式。

那么根据你的代码ul ul {list-style-type: disc}

意思就是ul下的ul样式是list-style-type: disc

另一个ul ul ul {list-style-type : square}的意思是

ul下的ul下的ul样式是list-style-type : square

如果html是这样

<ul class=u1><ul class=u2><ul class=u3></ul></ul></ul>

ul ul {list-style-type: disc}等同于.u2{list-style-type: disc}

ul ul ul {list-style-type : square}等同于.u3{list-style-type : square}