Question

我有一个供用户输入的HTML。

注意：标记HTML永远不会那样。有时，该教室将上移，该教室将下移，依此类推。或者，他们将添加更多的教室。

我的工作是寻找“我的孩子”的班级名称，并为每个我的孩子使用不同的颜色样式：我的第一个孩子是红色，第二个是绿色，第三个是蓝色。

问题：我使用first-of-type或nth-of-type（）（我也使用first-chil），但是它们都不起作用。因此，first-of-type，nth-of-type（）或first-child或Dim WS As Worksheet Dim LastRow As Long Dim bColumn As Range Dim cColumn As Range Dim dColumn As Range Dim eColumn As Range Dim fColumn As Range Dim gColumn As Range Dim hColumn As Range Dim iColumn As Range Dim jColumn As Range Dim kColumn As Range Set WS = ActiveWorkbook.Worksheets("UserData") With WS LastRow = .Cells(.Rows.Count, "B").End(xlUp).Row For Each bColumn In .Range("B3:B" & LastRow) If bColumn.Value <> "" Then Me.comboA.AddItem bColumn.Value End If Next End With With WS LastRow = .Cells(.Rows.Count, "C").End(xlUp).Row For Each cColumn In .Range("C3:C" & LastRow) If cColumn.Value <> "" Then Me.comboB.AddItem cColumn.Value End If Next End With Dim objOutlook As Object Dim objEmail As Object Set objOutlook = CreateObject("Outlook.Application") objOutlook.Session.Logon Set objEmail = objOutlook.CreateItem(0) objEmail.Display On Error Resume Next With objEmail .To = comboA.Value & ", " & _ comboB.Value & ", " & _ comboC.Value & ", " & _ comboD.Value & ", " & _ comboE.Value & ", " & _ comboF.Value & ", " & _ comboG.Value End With并不是解决方案。

jsfiddle

.school .my-child:first-of-type {
      color: red;
    }
    .school .my-child:nth-of-type(2){
      color: green;
    }
    .school .my-child:nth-of-type(3) {
      color:blue;
    }

Answer 1

添加一些JavaScript，为每个.my-child div提供一个新类：child1，child2等。然后使用颜色定位这些新类。

document.querySelectorAll('.school .class-room .my-child')
  .forEach(function(el, i) {
    el.className += ' child'+(i+1);
  })

.my-child.child1 {
  color: red;
}

.my-child.child2 {
  color: green;
}

.my-child.child3 {
  color: blue;
}

/* add as many more as necessary */

<div class="school">
  <div class="class-room">
    <div class="other">Child</div>
  </div>
  <div class="class-room">
    <div class="other">Child</div>
  </div>
  <div class="class-room">
    <div class="other">Child</div>
  </div>
  <div class="class-room">
    <div class="my-child">Child</div>
  </div>
  <div class="class-room">
    <div class="other">Child</div>
  </div>
  <div class="class-room">
    <div class="other">Child</div>
  </div>
  <div class="class-room">
    <div class="other">Child</div>
  </div>
  <div class="class-room">
    <div class="my-child">Child</div>
  </div>
  <div class="class-room">
    <div class="other">Child</div>
  </div>
  <div class="class-room">
    <div class="other">Child</div>
  </div>
  <div class="class-room">
    <div class="my-child">Child</div>
  </div>
  <div class="class-room">
    <div class="other">Child</div>
  </div>
</div>

或者，如果您对所有内容都使用jQuery，则可以将其用于JavaScript：

$('.school .class-room .my-child')
  .each(function(i, el) {
    $(this).addClass('child'+(i+1));
  });

Answer 2

不幸的是， nth-of-type（）选择器不能那样工作。对于以下选择器，它将：

.school .my-child：nth-of-type（3）

在元素“ .school”中找到带有选择器“ .my-child”的所有元素
“。my-child”元素是div（类型部分所在的位置）
在直接父级（兄弟姐妹，在这种情况下，是“ .class-room”下的所有div）中查找第三个div（上面找到的类型）< / li>
该元素中没有3个div。选择器将不执行任何操作。

您目前仅在CSS中无法做您想做的事情。一个javascript选项如下所示：

let myChildren = document.getElementsByClassName('my-child'); // an array containing all '.my-child' elements

// Iterate over every .my-child element
for(let i = 0; i < myChildren.length; i++){
  if(i % 3 === 0){ // checking that there is no remainder from this operation allows us to get every third
    this.style.color = 'red';
  }
}

CSS选择相同的类名并分配不同的属性

2 个答案: