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＆＃39;

<强>更新

您还需要仅将width:50%应用于.left课程，并且您错过了.的{{1}}

查看以下示例

CSS

cellYH

JSFIDDLE

Answer 2

将第37行更改为.leftYH, .rightYH, .cellYH（小写H并在cellYH之前丢失.）。

Answer 3

有两种方法可以从多个CSS类继承〜

多类样式：这表明所有类都获得以下属性
```
 left a, .right a, .cell a{
       ....

 }
```
多类元素：您可以将多个类应用于任何html标记，例如
```
<a class="left right cell>
```

为单个div应用多个类

3 个答案: