为单个div应用多个类

时间:2014-01-11 18:55:27

标签: html css

我创建了一个子菜单,我想根据子菜单加载的页面来改变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

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

由于

3 个答案:

答案 0 :(得分:2)

你的css班级名称是错误的,他们应该是.leftYH, .rightYH, .cellYH你有小写的h&#39;

<强>更新

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

查看以下示例

CSS

cellYH

JSFIDDLE

答案 1 :(得分:0)

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

答案 2 :(得分:0)

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

  • 多类样式:这表明所有类都获得以下属性

     left a, .right a, .cell a{
           ....
    
     }
    
  • 多类元素:您可以将多个类应用于任何html标记,例如

    <a class="left right cell>