html - 为单个 div 应用多个类

Question

我创建了一个子菜单，我希望 div 的背景颜色根据加载子菜单的页面而改变。

第一个示例(代码适用于一页):

HTML

<div class="tablecontainer">
    <div class="left">
        <p><a href="#">Link1</a></p>
    </div>
    <div class="right">
        <p><a href="#">Link2</a></p>
    </div>
    <div class="left">
        <p><a href="#">Link3</a></p>
    </div>
    <div class="right">
        <p><a href="#">Link4</a></p>
    </div>
    <div class="cell">
        <p><a href="#">Link5</a></p>
    </div>    
</div>

CSS

.tablecontainter{
    width:100%  
}
.left {
    float: left;
    width: 50%;
    margin-bottom: 1px;
    padding-right: 5px;
    padding-left: 5px;
    border: 1px;
    border-style: solid;
    border-color: white;
    background-color: #660066;
    text-align: center; 
}
.left a{
    text-decoration: none;
    color: #fff;
    font-size: 1em;
}
.right {
    margin-left: 50%;
    margin-bottom: 1px;
    padding-right: 5px;
    padding-left: 5px;
    border: 1px;
    border-style: solid;
    border-color: white;
    background-color: #660066;
    text-align: center; 
}
.right a{
    text-decoration: none;
    color: #fff;
    font-size: 1em;
}
.cell{
    width: 100%;
    margin-bottom: 1px;
    border: 1px;
    border-style: solid;
    border-color: white;
    background-color: #660066;
    text-align: center;
}
.cell a{
    text-decoration: none;
    color: #fff;
    font-size: 1em;
}

jsfiddle: example1

和第二个例子

HTML

<div class="tablecontainer">
    <div class="left leftYH">
        <p><a href="#">Link1</a></p>
    </div>
        <div class="right rightYH">
        <p><a href="#">Link2</a></p>
    </div><div class="left leftYH">
        <p><a href="#">Link3</a></p>
    </div>
    <div class="right rightYH">
        <p><a href="#">Link4</a></p>
    </div>
    <div class="cell cellYH">
        <p><a href="#">Link5</a></p>
    </div>    
</div>

CSS

.tablecontainter{
    width:100%;
}
.left{
    float: left;
}
.left, .right{  
    width: 50%;
    margin-bottom: 1px;
    padding-right: 5px;
    padding-left: 5px;
    border: 1px;
    border-style: solid;
    border-color: white;
    text-align: center;
}
.cell{
    width: 100%;
    margin-bottom: 1px;
    border: 1px;
    border-style: solid;
    border-color: white;
    text-align: center; 
}
.left a, .right a, .cell a{
    text-decoration: none;
    color: #fff;
    font-size: 1em;
}
.leftYh, .rightYh, cellYH{
    background-color: #660066;  
}

jsfiddle: example2

我将具有相似属性的所有类和属性唯一的其他类分组。但是这段代码根本不起作用。有人知道我在哪里搞砸了吗？

谢谢

Answer 1

你的 css 类名是错误的，它们应该是 .leftYH, .rightYH, .cellYH 你的 h 是小写的

更新

您还需要将 width:50% 仅应用于您的 .left 类，并且您缺少 . 用于 细胞YH

看看下面的例子

CSS

.tablecontainer{
    width:100%
}
.left, .right{
    margin-bottom: 1px;
    padding-right: 5px;
    padding-left: 5px;
    border: 1px;
    border-style: solid;
    border-color: white;
    text-align: center;
}
.left{
    width: 50%;
    float: left;
}
.cell{
    width: 100%;
    margin-bottom: 1px;
    border: 1px;
    border-style: solid;
    border-color: white;
    text-align: center; 
}
.left a, .right a, .cell a{
    text-decoration: none;
    color: #fff;
    font-size: 1em;
}
.leftYH, .rightYH, .cellYH{
    background-color: #660066;
}

JSFIDDLE