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 或者你可以在谷歌搜索关于CSS中的伪类。

Answer 4

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

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

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

Answer 5

您可以使用:nth-child：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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

＆＃13;

div

＆＃13;

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

＆＃13;

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

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

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

5 个答案: