css - 为带有类名的第一个 ul 应用不同的样式

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 .