css - 一个元素上有多个类名的奇怪行为？

Question

我有以下 CSS:

   .side-study-box {
    background-color: white;
    color: black;
    border: 3px solid #0072A6;
    text-align: center;
    height: 220px;
    margin-bottom: 15px;
    margin-top: 15px;
    display: table;

    -webkit-box-shadow: 3px 3px 3px #888888;
    -moz-box-shadow: 3px 3px 3px #888888;
    box-shadow: 3px 3px 3px #888888;
}
    .side-study-box p {
        position: relative;
        width: 100%;
        margin: auto;
        font-size: 24px;
        display: table-cell;
        vertical-align: middle;
    }

以及以下 HTML:

<div class="side-study-box span6 ">
     <p>SIDE 1</p>
</div>

然而，文本并未垂直或水平居中。如果我从 div 中删除 span6 类或以 span6 为目标而不是我的 css 中的 side-study-box，它就可以工作。不过我确实需要这两个类(class)...我做错了什么？

Answer 1

在我看来，另一条针对 span6 类名称的规则正在影响事物。尝试增加特异性。添加一个 #id 选择器，或者在它们前面加上 body。像这样的东西:

body .side-study-box { /*...*/ }
body .side-study-box p {/*...*/ }