Question

我需要使用jQuery覆盖在样式表中定义的已定义的：last-child样式。我的目标是使用css和jQuery的组合进行最小化标记，其中“container-content”周围的结构被附加到文档就绪的div上。

<div id="title-some-impact"><!--Vertical container title--></div>
   <div class="container-content-wrapper">
         <div></div>
         <div class="container-content"><!--Actual container content-->
            <div class="sub-container-content"></div>
         </div>
         <div style=""></div>
   </div>
   <div style="clear: both;"></div>
</div>

我正在使用container-content-wrapper中的第一个和最后一个div来使用css添加圆角，如下所示：

.container-content-wrapper>div:first-child {  /* rounded corners top */
    width: 930px;
    height: 16px;
    background: url(../Images/top-rounded-corners.png) top no-repeat;
}

.container-content-wrapper>div:last-child { /* rounded corners bottom */
    width: 930px;
    height: 33px;
    background: url(../Images/bottom-rounded-corners.png) top no-repeat;
}

在某些情况下，我需要使用jQuery / JavaScript更改底部背景图像到目前为止已经失败了。

我尝试过使用： $（'。container-content-wrapper＆gt; div：first-child'）。css（'background'，'some other link'）; 此外，添加指向另一个图像的另一个类不起作用。

如何使用jQuery覆盖样式表中定义的：last-child样式？

Answer 1

$('.container-content-wrapper>div:first-child').css('background', 'some other link');

这个选择器适用于您的标记。它会从div中选择第一个.container-content-wrapper，它是一个直接上升的some other link。所以这不是你的问题。

CSS选择器没有引用jQuery选择器，因此您无法“覆盖”它们。您的{{1}}似乎错了。

Answer 2

实际上我最初在瞄准需要替换其风格的div时犯了一个错误。这只是做出正确选择的问题。

作为参考，我使用以下方法解决了这个问题：

$('.container-content-wrapper:has(.sub-container-content)')
.addClass('container-content-wrapper-for-sub');

其中container-content-wrapper-for-sub的样式和定义如下.container-content-wrapper＆gt; div：last-child

.container-content-wrapper-for-sub>div:last-child {
/* rounded corners bottom for subsection */
    background: url(../Images/bottom-rounded-corners-extra-gray.png);
}

override：使用jquery的first-child伪类样式

2 个答案: