Question

我在css样式表语法上有点迷失。我的困境是，我有四个<div>标签，其颜色相同，但颜色不同，或者一个可能float: left，但另一个标签可能没有。{/ p>

所以我想我可以将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>

<div>已经是块级元素，因此您无需在其上指定display: block。

Answer 2

您可以创建一个类.numbers（或最好描述您的div分组）以保存共享样式，并将该类添加到相关div中。然后，使用其id来定位各个div以调整颜色。

这样的事情可能有所帮助：

<强> CSS

.numbers {
 /* shared styles */ 
}

#one {
 /* unique styles */ 
}

#two {

 /* unique styles */ 
}

#three {

 /* unique styles */ 
}

以语义和有意义的方式组织您的样式可能具有挑战性，但是您节省维护代码的时间非常值得。有关如何执行此操作的更好的摘要，您可以阅读this文章。

Answer 3

您可以使用类来表示相似之处，并使用id表示差异。

<div class="common" id="some-id"><!-- ... --></div>

的 CSS： 的

.common { display: block; float: left; font-size: 11px; } #completeNumber { color: green }

Answer 4

由于id必须是唯一的，您可以为这些ID添加ID，然后使用：

#openRegistration{display:block; color:steelblue; float:left; font-size:11px;}
#openNumber{display:block; color:steelblue; font-size:11px; clear:right;}
#completedRequests{display:block; color:green; float:left; font-size:11px;}
#completeNumber{display:block; color:green; float:left; font-size:11px;}

现在，鉴于上述情况，我们可以将其简化为：

#openRegistration,#openNumber,#completedRequests,#completeNumber{display:block;font-size:11px;}
#openRegistration{ color:steelblue; float:left; }
#openNumber{color:steelblue;  clear:right;}
#completedRequests{ color:green; float:left;}
#completeNumber{ color:green; float:left; }

或者如果你想要，给他们一个班级并使用它：

.myClass{display:block;font-size:11px;}
#openRegistration{ color:steelblue; float:left; }
#openNumber{color:steelblue;  clear:right;}
#completedRequests{ color:green; float:left;}
#completeNumber{ color:green; float:left; }

编辑：或者如果你想要，给他们不止一个课程并使用它：

.myClass{display:block;font-size:11px;}
.complete{ color:green;}
.open{ color:steelblue;}
#openRegistration{  float:left;}
#openNumber{clear:right;}
#completedRequests{ float:left;}
#completeNumber{ float:left; }


<div class="myClass complete" ...

Answer 5

您可以定义一些CSS类，并根据您的需要将它们分配给您的元素。举个例子：

的 CSS： 的

.myDiv { display: block; font-size: 11px; } .left { float: left; } .clear-both { clear: both; } .steelblue { color: steelblue; } .green { color: green; }

的 HTML： 的

<div class="myDiv left steelblue">Open Requests </div> <div class="clear-both"></div> <div id="openNumber" class="myDiv steelblue">13</div> <div class="myDiv green left">Completed Requests </div> <div id="completeNumber" class="myDiv green left">13</div>

通过这种方式，您可以将您的班级分开，并仅在您真正需要时使用它们。

Answer 6

我会使用多个类将silimar样式组合在一起。尝试提取语义：

这样的事情：

<强> CSS：

.block11 { display:block;  font-size:11px; }
.left { float:left; }
.clear-right { clear:right; }
.steelblue { color: steelblue; }
.green { color: green; }

<强> HTML：

<div class="block11 steelblue left">Open Requests&nbsp;</div>
<div class="block11 steelblue clear-right" id="openNumber">13</div>

<div class="block11 green left">Completed Requests&nbsp;</div>
<div class="block11 green left" id="completeNumber">13</div>

将其转换为css样式表

6 个答案: