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，它可以工作。我确实需要这两门课......我做错了什么？

Answer 1

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

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