Question

第一次使用CSS，所以我的问题可能没有意义。我正在使用一个菜单模板，它使用javascript来滑动CSS项目。我有多个项目彼此相邻，我想通过为项目创建一个子类来交替背景（例如：.cc_item .odd{background:#fff}）。

式：

.cc_item{
    text-align: center;
    width: 140px;
    height: 600px;
    float: left;
    border-bottom: 1px solid #000;
    background: #e8c486 url(../images/menuBack.jpg) repeat top left;
    position: relative;
    -moz-box-shadow: 3px -3px 10px #000;
    -webkit-box-shadow: 3px -3px 10px #000;
    box-shadow: 3px -3px 10px #000;
}

HTML：

<div class="cc_item" style="z-index:6;">
    <img src="images/1.jpg" alt="image" />
    <span class="cc_title">Pizza</span>
    <div class="cc_submenu">
        <ul>
            <li class="cc_content_1">Pizzas</li>
            <li class="cc_content_2">Calzones</li>
        </ul>
    </div>
</div>

我想在cc_item中添加.odd{ }，所以在html中我可以指定“奇数”cc_item类。我尝试了几件事，但似乎无法让它发挥作用。

我不知道将子类添加到css项的正确方法。我用我的表样式表完成了它，但是“。”在cc_item面前让我失望（对不起......真的很新）。
我不知道在html中指定“class = odd”的位置。
我不知道是否进行了这些更改，使用cc_item的javascript会受到影响。

感谢。

Answer 1

您可以为元素提供多个类，如下所示：

 <div class="cc_item odd" style="z-index:6;">

用空格分隔它们。

要使用CSS或jQuery引用该代码，您可以将类链接在一起并像这样引用它们：

.cc_item.odd { /*styles go here*/ } or $('.cc_item.odd')

这会影响两个类。如果你想在IE6中使用它，请阅读以下说明： http://www.oppenheim.com.au/2009/05/24/multiple-css-classes-a-little-known-ie6-hack/

另外，只是一个FYI - 当你使用jQuery的addClass()方法时，它会自动为你添加类之间的空间，所以你需要传递的只是奇数类。

Answer 2

我认为没有CSS子类这样的东西..但试试这个

在您现有的关闭大括号.cc_item_odd{...}之后添加新的}（我不会将其称为.odd，因为由于没有子类，因此描述性较差且更容易发生冲突）

更改课程集class="cc_item cc_item_odd"时，您可以使用多个课程。我不确定你的JavaScript是如何进行查找的，但我认为它不会受到影响

将CSS子类添加到javascript中使用的CSS项目中？

2 个答案: