Question

我有一个CSS类，每次重复定义不同的宽度。该页面按不同类别显示性能。当然，问题在于，每次出现类时，最终的CSS声明样式都会对所有类元素进行样式化。我怎样才能使同一类的每一行具有不同的宽度？ CSS可能吗？理想情况下，我不想使用JS。

下面的代码-

<style type="text/css">.resultsbar > div {width: 23%;} .altresults {margin-left: calc(23% + 10px);}</style>
<div class="resultsbar">
  <div class="bar" style="width: 23%; margin-left: calc(23% + 10px);">
    <div class="fr">DONE: 23%</div>
  </div>
  <div class="altresults">TO DO: 77%</div>
</div>
<style type="text/css">.resultsbar > div {width: 43%;} .altresults {margin-left: calc(43% + 10px);}</style>
<div class="resultsbar">
  <div class="bar" style="width: 43%; margin-left: calc(43% + 10px);">
    <div class="fr">DONE: 43%</div>
  </div>
  <div class="altresults">TO DO: 57%</div>
</div>

Answer 1

是的，我想我们可以通过使用（：nth-of-type（1）...（2）....（3）等等）来做到这一点。您可以按照我添加的示例将垂直不同的宽度分配给该框或div：

.resultsbar:nth-of-type(1) {
    width: 53%;
}
like that. :)

Answer 2

使用CSS的“ nth-child”属性可能不需要js

示例

.resultsbar{
 float:left;
width:100%;
}
.resultsbar .bar {
width:23%;
 float:left;
}
.resultsbar .altresults {
width:77%;
 float:left;
}
.resultsbar:nth-child(2n) .bar {
width:43%;
 float:left;
}
.resultsbar:nth-child(2n) .altresults {
width:57%;
 float:left;
}

<div class="resultsbar">
<div class="bar">
<div class="fr">DONE: 27%</div>
</div>
<div class="altresults">TO DO: 77%</div>
</div>

<div class="resultsbar">
<div class="bar">
<div class="fr">DONE: 43%</div>
</div>
<div class="altresults">TO DO: 57%</div>
</div>

Answer 3

无需添加<style>...</style>标记并通过类名对其进行更新，则可以如下所示添加inline style

<div class="resultsbar">
  <div class="bar" style="width: 23%; margin-left: calc(23% + 10px);">
    <div class="fr">DONE: 23%</div>
  </div>
  <div class="altresults">TO DO: 77%</div>
</div>
<div class="resultsbar">
  <div class="bar" style="width: 43%; margin-left: calc(43% + 10px);">
    <div class="fr">DONE: 43%</div>
  </div>
  <div class="altresults">TO DO: 57%</div>
</div>

具有不同CSS宽度的重复类

3 个答案: