Question

我正在尝试简化我的CSS并且无法理解为什么我不能将样式应用于具有相同类的不同元素类型。

例如，下面只会设置所有.forum元素的样式海军，但忽略其他更具体的样式。有办法解决这个问题吗？

HTML

<h1 class="forum">Forum Header</h1>

    <p class="forum">Forum Content</p>

    <small class="forum">Small deets</small>

CSS

.forum {
color: navy;
}

.forum h1 {
    text-decoration: underline;
}

.forum small {
    font-size: 2em;
}

Answer 1

试试这个：

.forum {
  color: navy;
}

h1.forum {
  text-decoration: underline;
}

small.forum {
  font-size: 2em;
}

请注意，您使用了错误的选择器，.forum h1表示选择的h1是.forum的一个后代，而h1.forum表示选择h1元素上课forum。

Answer 2

应该是这样的

h1.forum {
  text-decoration: underline;
}

.forum h1 { //this applies to a h1 inside the .forum class element
    text-decoration: underline;
}

Answer 3

这应该有效

.forum {
color: navy;
}

h1.forum  {
    text-decoration: underline;
}

small.forum  {
    font-size: 2em;
}

Answer 4

你有Css风格的问题，正确的CSS是：

.forum {
color: navy;
}

h1.forum  {
    text-decoration: underline;
}

small.forum  {
    font-size: 2em;
}

Answer 5

这也取决于你想要达到的目标。如果您想要定义论坛样式。您最好将类添加到div而不是单独添加每个元素。否则，您会反复将类论坛添加到每个元素中。

<div class="forum">
    <h1>Forum Header</h1>
    <p>Forum Content</p>
    <small>Small deets</small>
</div>

.forum {/* PUT HERE THE FORUM DEFAULT STYLES WHICH ARE COMMON LIKE IE. COLOR, FONT-SIZE */}
.forum h1 {/* PUT HERE H1 FORUM STYLES WHICH ARE SPECIFIC -THESE WILL BE OVERRIDDEN IF DECLARED in .forum {} */}
.forum p {/* PUT HERE P FORUM STYLES WHICH ARE SPECIFIC -THESE WILL BE OVERRIDDEN IF DECLARED in .forum {} */}
.forum small {/* PUT HERE SMALL FORUM STYLES WHICH ARE SPECIFIC -THESE WILL BE OVERRIDDEN IF DECLARED in .forum {} */}

另一方面，如果您需要将论坛样式应用于单个元素（如p）而不是其他元素，则可以直接将该类添加到元素中。

  <div>
    <h1>Forum Header</h1>
    <p class="forum">Forum Content</p>
    <small>Small deets</small>
</div>

p.forum {}

使用一个具有不同HTML元素的类

5 个答案: