回答你失效的那个问题:
问题1:第一种中的写法相当于#name1 div 和span元素同时具有相同样式;
#name1 div,span{}这种写法是并列关系,等同于:
#name1 div{}
span{}
所有span标签都具有和#name1 div一样的样式,所以对你div中的span元素有影响,而第二种是在#name1下的span标签的样式,所以对#name2中的span标签没有影响。
问题2:如果你不想让样式冲突的话,可以用以下方法解决:
》每个代码块中的样式定义都要在当前层的范围下,使每个代码块中的元素的样式只对当前模块有效,不会影响到其他模块:
.div1 span{}
.div1 a{}
.div2 span{}
.div2 a{}
<div class="div1">
<span></span>
<a></a>
</div>
<div class="div2‘>
<span></span>
<a></a>
</div>
如上,所有div1中的元素的样式都定义在.div1后面,所有div2中的元素的样式都定义在.div2后面,
CSS是样式层叠表,有三种引入方式。下面,我们来看看HTML样式CSS的三种写法吧。
行内样式CSS可以直接放到行内样式中引入即可,比如代码如下图:
<p style="color: bluebackground: red">
hello world!
</p>
嵌入式还可以采用潜入方式引入CSS,就是把CSS写到<style>标签中,这种方式比较实用,如下图所示:
<style type="text/css">
h1 {color: red}
</style>
<h1>helloworld</h1>
外部样式表还有一种叫做外部样式,也就是把CSS写在另外一张页面上,然后再引用到指定页面就可以了,这种也很常见。
@import url(main.css)