0

我的意思是，如果我有一个包含两个 div 的页面，并且我希望每个 div 有一个单独的样式，我会怎么做呢？

例子：

div{ background: red;} // apply this style to one div.
div{ background: blue;} //apply this style to another div.

我意识到可以只为每个 div 添加一个类，但是如果我扩展它呢？如果我希望我的页面的整个部分使用许多不同的属性来使用样式表的一部分，而另一个整个部分使用另一部分怎么办？

4

3 回答 3

3

您可以简单地在 CSS 规则前面加上部分的 ID 或类。例如：

#section1 h1 {
    color: red;
}

#section2 h1 {
    color: blue;
}

并且基本上在每个规则前面加上#section1或#section2取决于包含部分。

于 2013-01-14T08:52:44.780 回答
2

据我了解，您希望例如标题中的每个 div 都是绿色的，而页脚中的每个 div 都应该是红色的。

#header div{ background-color: green; }

然后

<div id="header">
    <div>I'm green</div>
</div>

您还可以使用更复杂的选择器来帮助您解决特殊情况，例如：

#header div{ background-color: red; }
#header > div{ background-color: green; }

然后

<div id="header">
    <div>
        I'm green...
        <div>...and I'm red</div>
    </div>
</div>

Microsoft 对可用的选择器有一个很好的概述。有的例子有时有点弱，但它的东西。

于 2013-01-14T08:55:46.527 回答
1

你可以这样做：

.firstSectionType div{ background: red;} // apply this style to one div.
.firstSectionType span { color: blue; }
.secondSectionType div{ background: blue;} //apply this style to another div. 
.secondSectionType span {color: red; }

然后，如果您的 HTML 如下所示：

<div class="firstSectionType">
    <p><span>Hello</span></p>
    <div>This has a red background and <span>this is blue text</span></div>
</div>
<div class="secondSectionType">
    <p><span>Hello</span></p>
    <div>This has a blue background and <span>this is red text</span></div>
</div>

相应部分中的divs 和spans 将被相应地格式化。

上面的 CSS 要求您在每个规则中重复.firstSectionType或.secondSectionType，但是像LESS这样的 CSS 预处理器将允许您像这样重写它：

.firstSectionType
{
    div{ background: red;} // apply this style to one div.
    span { color: blue; }
}
.secondSectionType 
{
    div{ background: blue;} //apply this style to another div. 
    span {color: red; }
}
于 2013-01-14T08:56:50.280 回答