如何将不同的CSS应用于div中具有相同类的两个div？

Question

<div class="section-cm director-general-section">
  <h2 class="widget-title section-cm-heading heading--center">Director General</h2>
  <img width="140" height="160" class="image wp-image-183  attachment-full size-full" alt="" style="max-width: 100%; height: auto;">
  <div class="textwidget custom-html-widget">Director</div>
  <div class="textwidget custom-html-widget">hello</div>
</div>

如何将不同的CSS应用于.custom-html-widget DIV？我无法为DIV添加一个唯一的类。

Answer 1

您可以尝试以下代码

.custom-html-widget:nth-of-type(1){
 color:red;   
}

现在如果你有很多没有div或li项目，你可以简单地使用第n种规则..

Answer 2

使用+选择器，如果您的div一个接一个

.custom-html-widget {
  color: red;
}

.custom-html-widget + .custom-html-widget {
  color: blue;
}

<div class="section-cm director-general-section">
     <h2 class="widget-title section-cm-heading heading--center">Director General</h2>
     <img width="140" height="160"  class="image wp-image-183  attachment-full size-full" alt="" style="max-width: 100%; height: auto;">
     <div class="textwidget custom-html-widget">
       Director
    </div>
   <div class="textwidget custom-html-widget">hello</div>
</div>

或使用:first-of-type和:last-child

.custom-html-widget:first-of-type  {
  color: red;
}

.custom-html-widget:last-child {
  color: blue;
}

<div class="section-cm director-general-section">
     <h2 class="widget-title section-cm-heading heading--center">Director General</h2>
     <img width="140" height="160"  class="image wp-image-183  attachment-full size-full" alt="" style="max-width: 100%; height: auto;">
     <div class="textwidget custom-html-widget">
       Director
    </div>
   <div class="textwidget custom-html-widget">hello</div>
</div>

Answer 3

你可以使用伪类来做到这一点。有关更多信息，您可以查看此文档。 https://developer.mozilla.org/en-US/docs/Web/CSS/%3Anth-child或者你可以在google上搜索css中的伪类。

Answer 4

div.custom-html-widget:first-child(){}

要更改第一个孩子的属性，否则为第二个孩子：

div.custom-html-widget:nth-child(2){}

Answer 5

你可以使用:nth-child：

.custom-html-widget:nth-child( 3 ) {
  background-color: gold;
}
.custom-html-widget:nth-child( 4 ) {
  background-color: rebeccapurple;
}

<div class="section-cm director-general-section">
  <h2 class="widget-title section-cm-heading heading--center">Director General</h2>
  <img width="140" height="160" class="image wp-image-183  attachment-full size-full" alt="" style="max-width: 100%; height: auto;">
  <div class="textwidget custom-html-widget">Director</div>
  <div class="textwidget custom-html-widget">hello</div>
</div>

这是通过选择.section-cm的第三个和第四个子元素来实现的。

---

你可以使用:nth-of-type：

.custom-html-widget:nth-of-type( 1 ) {
  background-color: red;
}
.custom-html-widget:nth-of-type( 2 ) {
  background-color: green;
}

<div class="section-cm director-general-section">
  <h2 class="widget-title section-cm-heading heading--center">Director General</h2>
  <img width="140" height="160" class="image wp-image-183  attachment-full size-full" alt="" style="max-width: 100%; height: auto;">
  <div class="textwidget custom-html-widget">Director</div>
  <div class="textwidget custom-html-widget">hello</div>
</div>

这是有效的，因为我们正在选择.custom-html-widget元素类型的第一个和第二个实例，这是一个div。

---

你可以使用:first-of-type()和:last-of-type()：

.custom-html-widget:first-of-type {
  background-color: seagreen;
}
.custom-html-widget:last-of-type {
  background-color: orange;
}

<div class="section-cm director-general-section">
  <h2 class="widget-title section-cm-heading heading--center">Director General</h2>
  <img width="140" height="160" class="image wp-image-183  attachment-full size-full" alt="" style="max-width: 100%; height: auto;">
  <div class="textwidget custom-html-widget">Director</div>
  <div class="textwidget custom-html-widget">hello</div>
</div>

这是有效的，因为只有两个DIV，你选择的是第一个和最后一个。

---

还有一些其他太像:last-child和:nth-last-of-type()。