Question

我正在尝试自学CSS并拥有以下标记：

<style type="text/css">
#content { display: block; width: 250px; height: 50px; background-color: #330000; }

/* pink */
#one { height: 25px; width: 25px; background-color: #FFCCCC; float: left; margin: 10px; }
/* hot pink */
#two { height: 25px; width: 25px; background-color: #FF0099; float: left; margin: 10px; }
/* tan */
#three { height: 25px; width: 25px; background-color: #CC9900; float: left; margin: 10px; }
/* aqua blue */
#four { height: 25px; width: 25px; background-color: #33FFFF; float: left; margin: 10px; }
/* yellow */
#five { height: 25px; width: 25px; background-color: #FFFF00; float: right; margin: 10px; }

</style>
</head>
<body>

<div id="content">
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
    <div id="four"></div>
    <div id="five"></div>
</div>

页面工作正常，但我有兴趣删除CSS本身的重复代码。即将所有高度，宽度，浮动全部放在一个定义中，然后覆盖每个#id值

的背景颜色

当我尝试时：

#content { height: 25px; width: 25px; float: left; margin: 10px }

然后把：

#one { background-color: #FFCCCC; }
#five { background-color: #FFFF00; float: right; }

没有用。

基本上我正在尝试删除重复标记的数量。

我错过了什么？

Answer 1

您必须在#content之后指定节点：

#content div { SAME RULES }
#one { INDIVIDUAL }
#five { INDIVIDUAL }

或者你可以这样做：

#one, #two, #five { SAME RULES }
#one { INDIVIDUAL }

您还可以为每个div提供一个类名并执行

.divs { SAME RULES }
#one { INDIVIDUAL }

Answer 2

你想：

#content div {

即。 “所有div元素都来自id为'content'的元素”

我建议您阅读http://css.maxdesign.com.au/selectutorial/。

Answer 3

你可以使用课程。定义包含公共属性的基类：

/* Generic class for all four elements */
div.button {  height: 25px; width: 25px; float: left; margin: 10px; }

然后定义1-4（我也在这里使用类，因为在许多情况下它是最佳实践，但如果你愿意，你可以继续使用ID）：

div.one { background-color: #FFCCCC; ... }
div.two { background-color: #FF0099; ... }

然后分配基类和特定类：

 <div id="one" class="button one"></div>

“按钮一”部分将允许两个类的属性应用于元素。

Answer 4

您的问题实际上有三种替代解决方案

第一种解决方案

第一个非常接近你自己写的内容，除了它应该为DIV下面的任何id="content"定义CSS：

#content div { height: 25px; width: 25px; float: left; margin: 10px }

第二种解决方案

我应该指出，这个可能更常见并且提供更大的灵活性，特别是如果你想让subDIV没有普通的类（在你的情况下调整大小）。这个会稍微改变你的标记，因为你可以在一个HTML元素上定义多个CSS类：

<div>
    <div class="content one"></div>
    <div class="content two"></div>
    <div class="content three"></div>
    <div class="content four"></div>
    <div class="content five"></div>
</div>

这样你的CSS类就会有所改变。您必须将#替换为.（点）：

.content { height: 25px; width: 25px; float: left; margin: 10px }
.one { background-color: #FFCCCC; }
...
.five { background-color: #FFFF00; float: right; }

第三种解决方案

这个与第二个非常相似，只不过它保留了子DIV的ID：

<div>
    <div id="one" class="content"></div>
    <div id="two" class="content"></div>
    <div id="three" class="content"></div>
    <div id="four" class="content"></div>
    <div id="five" class="content"></div>
</div>

和CSS：

.content { height: 25px; width: 25px; float: left; margin: 10px }
#one { background-color: #FFCCCC; }
...
#five { background-color: #FFFF00; float: right; }

Answer 5

在这里，#content div就是你想要的。如果需要，你可以更深入，即#content div span a将引用一个锚点，嵌套在一个嵌套在div中的span中，该div嵌套在ID为#content的内容中。

http://jsfiddle.net/eDhXs/

#content { display: block; width: 250px; height: 50px; background-color: #330000; }

#content div { height: 25px; width: 25px; float: left; margin: 10px; }
/* pink */
#one { background-color: #FFCCCC; }
/* hot pink */
#two { background-color: #FF0099; }
/* tan */
#three {background-color: #CC9900; }
/* aqua blue */
#four { background-color: #33FFFF; }
/* yellow */
#five { background-color: #FFFF00; }

Answer 6

这是您可以使用课程的地方。当您拥有页面特有的特定元素时，ID非常适合。但是，类，您可以定义一组属性（甚至设置一个比另一个更重要的属性）。更确切地说，一个元素可以有多个不能ID的类

所以我要做的就是这个

#pink { background-color: #FFCCCC; }
#hotpink { background-color: #FF0099; }
#tan{ background-color: #CC9900; }
#aquablue { background-color: #33FFFF; }
#yellow { background-color: #FFFF00; }

.box {
  height: 25px;
  width: 25px;
  float: left;
  margin: 10px;
}

并在您的HTML中指定它们

<div id='pink' class='box'></div>

我最喜欢这个版本，因为如果您需要在DOM中明确选择此元素，它看起来像

#pink.box {
   height: a different height;
}

Answer 7

你有两个选择，第一个是使用父容器（在本例中为div #content）为每个嵌套div设置默认属性，为此你可以使用这样的代码：

#content div {
repeat-attributes-here;
}

这将为#content中的每个div设置属性。

第二个选项是使用类来定义公共属性。这样做的好处是你仍然可以使用其他具有不同样式选项的div（如果你在不需要重复功能的地方添加新内容。

为此，您可以这样做：

#one {
unique-functionality-here
}

.layout-block {
repeat functionality here
}

然后在CSS中定义div：

<div id="one" class="layout-block"></div>

希望有所帮助！

避免在CSS中重复样式

7 个答案:

第一种解决方案

第二种解决方案

第三种解决方案