避免在CSS中重复样式

cos*_*son 5 css

我正在尝试自学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>
Run Code Online (Sandbox Code Playgroud)

页面工作正常,但我有兴趣删除CSS本身的重复代码.即所有高度,宽度,浮动都在一个定义中然后覆盖每个#id值的背景颜色

当我尝试:

#content { height: 25px; width: 25px; float: left; margin: 10px }
Run Code Online (Sandbox Code Playgroud)

然后把:

#one { background-color: #FFCCCC; }
#five { background-color: #FFFF00; float: right; }
Run Code Online (Sandbox Code Playgroud)

那没用.

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

我错过了什么?

Que*_*tin 4

你要:

#content div {
Run Code Online (Sandbox Code Playgroud)

即“从具有 id 'content' 的元素派生的所有 div 元素”

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