.two{border:10px solid #000; background:url(https://www.jb51.net/2.jpg) no-repeat left top;}
在页面代码中，我们可以这样调用:
<div class=one two></div>
这样最终的显示效果是这个div样式是什么呢？？重复的是以哪一个为准呢？？
<div class=one two></div>应用到的样式如下：
width:200px;
border:10px solid #000;
background:url(https://www.jb51.net/2.jpg) no-repeat left top;
因为，当应用两个或多个样式时，浏览器所应用的样式根据是属性追加重复最后优先原则
就是说两个或多个或重复的样式名定义，浏览器所应用的样式是按先后顺序的，如果定义了重复的属性值，以最后定义的为准，如果应用了两个或多个样式名，里面不重复定义的属性值就追加上去，重复的属性值就以最后一个为准。这里要注意的是，样式的先后不是根据页面上应用的名字顺序，而是样式表里的样式顺序。
十一、使用子选择器(descendant selectors)
使用子选择器是影响他们效率的原因之一。子选择器可以帮助你节约大量的class定义。我们来看下面这段代码：
<div id=subnav>
<ul>
<li class=subnavitem> <a href="https://www.jb51.net/article1/#" class=subnavitem>Item 1</a></li>>
<li class=subnavitemselected> <a href="https://www.jb51.net/article1/#" class=subnavitemselected> Item 1</a> </li>
<li class=subnavitem> <a href="https://www.jb51.net/article1/#" class=subnavitem> Item 1</a> </li>
</ul>
</div>
这段代码的CSS定义是：
div#subnav ul { }
div#subnav ul li.subnavitem { }
div#subnav ul li.subnavitem a.subnavitem { }
div#subnav ul li.subnavitemselected { }
div#subnav ul li.subnavitemselected a.subnavitemselected { }
你可以用下面的方法替代上面的代码
<ul id=”subnav”>
<li> <a href="https://www.jb51.net/article1/#>" Item 1</a> </li>
<li class=sel> <a href="https://www.jb51.net/article1/#>" Item 1</a> </li>
<li> <a href="https://www.jb51.net/article1/#>" Item 1</a> </li>
</ul>
样式定义是：
#subnav { }
#subnav li { }
#subnav a { }
#subnav .sel { }
#subnav .sel a { }
用子选择器可以使你的代码和CSS更加简洁、更加容易阅读。
如果一个容器里有多个同样的元素，而且这些元素样式都不一样，请避免用这个方式，建以采用不同的class如：
<ul class=”one”><li></li></ul>
<ul class=”tow”><li></li></ul>
十二、不需要给背景图片路径加引号
