0

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

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

我将如何处理样式表中的每个单独的 id？我在想类似的div#id东西。让我们假设 basicdiv已经不可用，但我想要一些至少包含的抽象样式表标签，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>

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

感谢您的任何见解

4

6 回答 6

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>已经是一个块级元素，所以你不需要display: block在它上面指定。

于 2013-01-15T16:41:37.780 回答
0

我会使用多个类将 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>
于 2013-01-15T16:46:20.673 回答
0

您可以创建一个类.numbers（或最能描述您的 div 分组的任何内容）来保存共享样式，并将该类添加到有问题的 div 中。然后，用它们的 id 定位单个 div 来调整颜色。

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

CSS

.numbers {
 /* shared styles */ 
}

#one {
 /* unique styles */ 
}

#two {

 /* unique styles */ 
}

#three {

 /* unique styles */ 
}

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

于 2013-01-15T16:37:34.070 回答
0

您可以使用一个类来表示相似之处，并使用一个id来表示不同之处。

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

CSS：

.common {
    display: block;
    float: left;
    font-size: 11px;
}

#completeNumber {
    color: green    
}
于 2013-01-15T16:40:07.370 回答
0

由于 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" ...
于 2013-01-15T16:40:47.833 回答
0

您可以定义一些 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&nbsp;</div>
<div class="clear-both"></div>
<div id="openNumber" class="myDiv steelblue">13</div>

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

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

于 2013-01-15T16:43:26.947 回答