关于多类选择器的问题

Question

转行狗学了前端有一段时间，但是没做过实例，所以想通过研究17k小说阅读网来提高一下自己的技术。
一、布局
原网站的部分代码：

<div class="Header1">
    <div class="cont_box">
        <dl class="nav" id="Q_loginBar1">
            <dd class="login">
                <span class="icon"></span>
                <a href="javascript:Q.login(function(){Q.setIndexLoginInfo('Q_loginBar1')});void(0)"> 登录</a>   |   <a href="http://passport.17k.com/register">注册</a>
            </dd>
            <dd class="histroy">
                <div class="tit">
                    <span class="icon"></span>
                    <a href="javascript:Q.login(function(){Q.setIndexLoginInfo('Q_loginBar1')});void(0)">看过</a>
                </div>
                <div class="cont">
                    <div class="logout">
                        <p>Duang, 您还未登录</p>
                    </div>
                </div>
            </dd>
            <dd class="booklib">
                <div class="tit">
                    <span class="icon"></span>
                    <a href="javascript:Q.login(function(){Q.setIndexLoginInfo('Q_loginBar1')});void(0)">书架</a>
                </div>
                <div class="cont">
                    <div class="logout">
                        <p>Duang, 您还未登录</p>
                    </div>
                </div>
            </dd>
            <dd class="message">
                <div class="tit">
                    <span class="icon"></span>
                    <a href="javascript:Q.login(function(){Q.setIndexLoginInfo('Q_loginBar1')});void(0)">消息</a>
                </div>
                <div class="cont">
                    <div class="logout">
                        <p>Duang, 您还未登录</p>
                    </div>
                </div>
            </dd>
            <dd class="write">
                <span class="icon"></span>
                <a target="_blank" href="http://author.17k.com/author/getAuthorInfo.action">写书</a>
            </dd>
            <dd class="recharge">
                <span class="icon"></span>
                <a target="_blank" href="http://pay.17k.com/show/baopay">充值</a>
            </dd>
<!--            <script type="text/javascript">
                Q.setIndexLoginInfo('Q_loginBar1');
            </script>-->
        </dl>

        <a class="logo" href="http://17k.com/"></a>

        <form class="so" target="_blank" action="http://search.17k.com/search.xhtml">
            <input name="c.st" value="0" type="hidden">
            <input value="乱世宏图" class="q" name="c.q" onfocus="this.value==this.defaultValue&&this.select()" type="text">
            <input class="m" value="搜索" type="submit">
        </form>
    </div>
</div>

原本的效果是这样的：

在这里列出原网站的部分css代码：

.Header1 {
    z-index: 10;
    font-family: "microsoft yahei",serif;
    background: #fff;
}

在Header1中仅仅设置了背景颜色和字体。z-index：10 理论上的意思我知道，但是实际在整个网站中的实际效果是怎么样，我暂时还是不懂。

.Header1 .cont_box {
    line-height: 46px;
    height: 46px;
    padding: 20px 0;
    margin: auto;
    position: relative;
    width: 1000px;
}

在 .cont_box中设置了行高和盒子高，上下内边距是20px，所以实际盒子高度就是20*2+46=86px。margin：auto和width：1000px这个的效果是使得盒子模型居中，且不会完全占满整个Header1盒子，二者缺一不可。
至于position：relative我并没有看出来有什么作用，即使把这个属性删除了，整个页面也没什么变化。查了一下position的默认值是static,没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。但是在.cont_box样式中并没有涉及到 top, bottom, left, right 或者 z-index 声明，所以我不理解为什么要专门写出position：relative。
另外 .Header1 .cont_box和直接写 .cont_box 这两种css选择器的写法具体有什么区别。找了一下w3school的解释是这样的：
我们假设 class 为 important 的所有元素都是粗体，而 class 为 warning 的所有元素为斜体，class 中同时包含 important 和 warning 的所有元素还有一个银色的背景 。就可以写作：

.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}

而w3school提供的html代码是这样的：

<p class="important warning">This paragraph is a very important warning.</p>

然而在17k小说阅读网中并没有class="Header1 cont_box" 这样写。所以按住道理来说直接写class = "cont_box"的话之前设置的样式应该是不起作用的？？？但是它实际上它还是起到了作用。
下面是这两个样式的原效果图：

Answer 1

你这里面提到了几点：

1、css权重问题：

css样式的选择器是存在权重大小问题的，浏览器渲染时相同的样式会选择权重大的进行渲染，当权重相同时，会选择新申明也就是后写的样式进行渲染。很重要的一点权重是可以相互叠加的。

• 内联样式(行内) 1000

• id (#) 100

• class(.) 10

• 属性选择器 10

• 伪类选择器 10 例如:hover

• 伪元素选择器 10 例如:after

• 标签 1

• 子选择器 0

• 继承 0

• 通配符(*) 0

那么有了以上的权重知识我们来解释下为什么.Header1 .cont_box中.cont_box单独写依然有效
首先.Header1中的样式和.cont_box的样式没有相同的部分，因此我们抛开样式覆盖的可能性，所以.Header1即使去掉也不会影响.cont_box的样式。
那么你可能要问.Header1还有什么用呢去掉就好了，在这里.Header1的作用是增加.cont_box的权重。原本.cont_box的权重是10，经过.Header1的叠加就成了10+10 也就是20 。
那么这样有什么好处呢，增加了权重防止了不经意篡改样式的可能，防止了.cont_box污染全局的css样式，我们们打个比方：
.Header1下存在了一个.cont_box，.Footer1下也存在了一个.cont_box，这时候如果你简单的只是

.cont_box {
    line-height: 46px;
    height: 46px;
    padding: 20px 0;
    margin: auto;
    position: relative;
    width: 1000px;
}

这样写的话那么代表了.Footer1中.cont_box的样式也是一样的。如果你想要为.Footer1中.cont_box单独设置样式那么就不得不

.Footer1 .cont_box {
    line-height: 46px;
    height: 46px;
    padding: 20px 0;
}

这么写来增加权重并且申明是.Footer1下的.cont_box自己的样式并且不会影响到全局。
.Footer1 .cont_box 的写法表示了 .cont_box是.Footer1下的一个子类（具体见相关文档这里不赘述）。
当项目比较小并且没有相同类名的时候去掉.Header1不会有什么影响，但是一旦出现相同那么.Header1就变得异常关键。

---

2.关于定位属性position的问题:

众所周知position属性有三个比较常用的relative、absolute、fixed

• relative 表示相对定位，也就是相对本身在文档流中的位置进行定位，值得一提的是，虽然是定位属性，但是relative的元素依然会占据文档流的位置，因此当本身不想改变文档流位置，但是子元素需要相对该元素定位时，就为该元素添加relative属性；

• absolute 表示绝对定位，相对于有position属性的最近父元素定位，如果这样的父元素不存在，那么相对body进行定位，absolute不会占据文档流，会完全抽离出文档流；

• fixed 表示固定定位，永远相对于body进行定位，不会占据文档流，会完全抽离出文档流

当然有一点很重要，虽然relative依然占据文档流，但是依然是定位属性
因为现在开发浏览器还没有找到好的方法来表现position的元素，但是可以用火狐浏览器3D模式，体验下float元素的表现方式，就可以想象出position的表现，毕竟position抽离出文档流的高度高于float。
最后我只想说希望能帮到你，我打得手都快废了。。。。。