Question

我必须修改另一位开发人员写的网站。

我需要一个类的字体和大小，但我需要另一个类的格式。

HTML：

 <div class="box1">
     <div class="box2">
         <p class="p1">
            The text I need printed
         </p>
     </div>
 </div>

的CSS：

.box1
{
    float:left;
    width:500px;
    padding:10px 0px 10px 15px;
}

.box1 p.p1
{
    font-size:15px;
    color:#ff00ff;
    line-height:22px;
}

    ...

.box2
{
    padding:10px;
}

.box2 p.p1
{
    font-size:12px;
    color:#ff0000;
    line-height:22px;
}

如何在保持对齐方式的同时使用box1中的p1？我宁愿不定义新的.box2 p.p2，除非这是唯一的方法。

感谢。

Answer 1

根据您发布的示例，我认为您不需要多个课程（正如其他人所建议的那样）。你意识到发生了什么吗？您的段落正在应用您定义的段落规则.box1 p.p1 和 .box2 p.p1。由于后者覆盖了前者的所有属性，因此这些是您看到的样式。

我认为您需要做的就是完全删除第二条规则（.box2 p.p1）。

Answer 2

我并不完全清楚你要完成什么，但是你的问题的基本答案（基本上需要结合两个类）是你可以有一个包含多个类的元素，只需用空格分隔它们

class="class1 class2 ...."

Answer 3

试试这个：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Untitled Document</title>
        <style type="text/css">
            .box1
            {
                float:left;
                width:500px;
                padding:10px 0px 10px 15px;
            }
            .box1 .box2 p.p1
            {
                font-size:15px;
                color:#ff00ff;
                line-height:22px;
            }
            .box2
            {
                padding:10px;
            }
            .box2 p.p1
            {
                font-size:12px;
                color:#ff0000;
                line-height:22px;
            }
        </style>
    </head>
    <body>
        <div class="box1">
            <div class="box2">
                <p class="p1">The text I need printed</p>
            </div>
        </div>
    </body>
</html>

以下是演示 - http://jsfiddle.net/fedev/ZwrfV/

<强>已更新

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Untitled Document</title>
        <style type="text/css">
            .box1
            {
                float:left;
                width:500px;
                padding:10px 0px 10px 15px;
            }
            .box1 p.p1, .box1 .box2 p.p1
            {
                font-size:15px;
                color:#ff00ff;
                line-height:22px;
            }
            .box2
            {
                padding:10px;
            }
            .box2 p.p1
            {
                font-size:12px;
                color:#ff0000;
                line-height:22px;
            }
        </style>
    </head>
    <body>
        <div class="box1">
                        <p class="p1">The text I need printed under box 1</p>
            <div class="box2">
                <p class="p1">The text I need printed under box 2</p>
            </div>
        </div>
    </body>
</html>

另一个演示 - http://jsfiddle.net/fedev/M9mWN/

如何使用一个类的对齐和另一个类的字体？

3 个答案: