css - 将其转换为 css 样式表

Question

我对 CSS 样式表语法有些迷茫。我的困境是我有四个 <div>具有大致相同样式的标签，除了颜色不同或可能有差异 float: left但另一个标签可能没有。

所以我想我可以添加 id所有这些，以便我可以将这些样式语句移动到样式表中。

我将如何处理样式表中的每个单独的 ID？我在想类似 div#id 的东西或者其他的东西。让我们假设基本 div已经不可用，但我想要一些至少包含 display:block 的抽象样式表标签和 font-size:11px然后是一个更具体的样式表标签来解决每个 <div>按其 id 或类或名称标记。

<div style="display:block; color:steelblue; float:left; font-size:11px;">Open Requests&nbsp;</div>
<div id="openNumber" style="display:block; color:steelblue; font-size:11px; clear:right;">13</div>

<div style="display:block; color:green; float:left; font-size:11px;">Completed Requests&nbsp;</div>
<div id="completeNumber" style="display:block; color:green; float:left; font-size:11px;">13</div>

我对不同选择器类型的语法有所了解

感谢您的任何见解

Answer 1

您可以尝试以下方法:

CSS:

.floatLeft { float: left; }
.clearRight { clear: right; }
.open { color: steelblue; font-size: 11px; }
.complete { color: green; font-size: 11px; }

html:

<div id="openRequests" class="open floatLeft">Open Requests&nbsp;</div>
<div id="openNumber" class="open clearRight">13</div>

<div id="completeRequests" class="complete floatLeft">Completed Requests&nbsp;</div>
<div id="completeNumber" class="complete floatLeft">13</div>

A <div>已经是 block 级元素，所以不需要指定display: block在上面。