Question

<div id=owl-slider>
<div class=item>
<div class=slider-text>

</div>
</div>
<div class=item>
<div class=slider-text>

</div>
</div>
<div class=item>
<div class=slider-text>

</div>
</div>
</div>

每个slider-text课程分别包含<div>，<h1>和<a> 如何更改第三个<h1>

的颜色

Answer 1

如果你需要改变每三分之一h1，你可以试试这个：

h1:nth-of-type(3) {
    color: #ff0000;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div>
<h1>One</h1>
<h1>Two</h1>
<h1>Three</h1>
<h1>Four</h1>
</div>

</body>
</html>

Answer 2

我不确定你是否愿意这样做，但它绝对有效。

将类或ID添加到h1标记。

<强> HTML

<span class="red"><h1>Hello</h1></span>

<强> CSS

.red{
color:red;
}

Answer 3

这是解决方案。

H1 是 .slider-text 的子项，而 .slider-text 是 .item 的子项。

＃owl-slider 有很多 .items 。

因此，我们必须仔细检查并选择第三项。

#owl-slider > .item:nth-child(3) h1{
  color: red;
}

这是codepen演示：click here

Answer 4

如果你已经启用了这个猫头鹰滑块，那么将通过脚本添加动态div与类＆＃34; owl-item＆＃34;。所以你必须将h1定位如下：

＆＃13;

#owl-slider .owl-item:nth-child(3) h1{
  color: red;
}

＆＃13;

Answer 5

您可以使用nth-child。

 .item:nth-child(3n) h1 a 
   {
      color: red;
      font-size: 12px;
   }

DEMO LINK

需要改变第三个<h1>的颜色

5 个答案: