Question

我需要更改与其他div具有相同类的div的样式。该网站是使用Umbraco构建的，我无法访问HTML以向我想要更改的div添加ID。 HTML的结构如下所示

<header>...</header>
<div class="container">...</div>
<div class="container">...</div>
<div class="container">...</div>

我需要在第3个div中添加背景图像。我不确定这样做的正确方法，而是可以用CSS完成，或者最好使用JavaScript。我尝试使用jQuery按索引选择div，但我没有得到任何东西。这就是我的开始。

<script>
$( ".container:eq( 2 )" ).css( "background", "url(/media/9165540/happy-female.jpg)" );
</script>

我还需要添加

background-size: cover;

但我不知道如何添加它。任何帮助，将不胜感激。感谢

Answer 1

在jQuery中你可以使用：

$('.container').eq(2).css({'background':'url(/media/9165540/happy-female.jpg)', 'background-size': 'cover'});

或使用以下命令为所有'.container'添加specyfic类：

$('.container').each(function(i){ $(this).addClass('container-'+i); });

按类设置样式。或者至少你可以使用CSS：

.container:nth-child(2)

但这是一个非常有问题的解决方案...因为CSS总是不改变第三个容器，但如果它位于它的父级的第三个位置，则更改容器。例如，如果你有这样的东西：

<div>
<header>...</header>
<footer>...</footer>
<div class="container">...</div>
<div class="container">...</div>
</div>

并想要选择你必须做的第二个容器：

.container:nth-child(4)

因为第二个容器相对于父容器处于第四位置。

Answer 2

请参阅：http://www.w3schools.com/cssref/sel_nth-of-type.asp

.container:nth-of-type(2)

虽然这是一个不太理想的解决方案，但是你应该做到这一点，你真的需要一些东西来扩展它。其他明智的任何具有2x容器元素的页面都将继承该样式。

Answer 3

如果你不担心IE8，那么:nth-of-type pseudo class可能就好了

<div class="container">...</div>
<div class="container">...</div>
<div class="container">...</div>

.container {
    width: 300px; 
    height: 50px;
    margin: 10px;
    border: 1px solid gray;
}
.container:nth-of-type(3) {
    border-color: red;
}

jsfiddle：http://jsfiddle.net/rpv69x4y/

此选项比:nth-child稍微灵活一些，因为您可以像下面那样使用标记，它仍然会选择第三个元素，其类为.container 。< / p>

<p>...</p>
<p>...</p>
<p>...</p>
<div class="container">...</div>
<p class="container">...</p>
<div class="container">...</div><!-- I get selected -->

Answer 4

谢谢大家的意见。我的解决方案是

$( "body" ).find( ".container" ).eq( 3 ).addClass( "background-image" );

多个div /同一个类具有不同的css

4 个答案: