Question

我有以下HTML结构。我想选择第一个ul，类名为“第二类”，并应用宽度，该宽度将与具有相同类名的第二个ul不同。

<div>
    <div class='Link1'>
        <a>Products</a>
        <div class = 'firstClass'>
            <ul class='secondClass'>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
    <div class='Link1'>
        <a>Tools</a>
        <div class = 'firstClass'>
            <ul class='secondClass'>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
<div>

我曾尝试过以下css，但没有工作。

.Link1 > .firstClass > ul.secondClass:first-child{
    width:750px;
}

Answer 1

仅使用CSS，无法在应用于一个元素后停止应用规则。这基本上意味着

 .Link1 > .firstClass > ul.secondClass:first-child

将适用于与该选择器匹配的所有元素。

但是，您可以使用JavaScript轻松地将其他类应用于第一场比赛：

var firstMatch = document.querySelector('.Link1 > .firstClass > ul.secondClass:first-child');
firstMatch.className = firstMatch.className + ' additionalClass';

...当然，您需要在CSS中设置additionalClass样式：

.Link1 > .firstClass > ul.secondClass.additionalClass:first-child {
  /* CSS here */
}

使用jQuery，它将是：

$('.Link1 > .firstClass > ul.secondClass:first-child').first().addClass('additionalClass');

这里是working example，而不是the original, not working。

使用classname为第一个ul应用不同的样式

1 个答案: