Question

我试图将一个样式应用于div的每个实例，除了第一个，我尝试了nth-child和first-of-type的每个组合，我认为无济于事。

这是HTML：

<div id="calendar">
    <div class="large-2 medium-2 columns">&nbsp;</div>
    <div class="large-8 medium-8 columns">
        <div class="month">April</div>
        <div class="event">
            <div class="date large-2 medium-2 left"><span class="day">18</span><span class="dayofweek">FRI</span></div>
            <div class="description large-10 medium-10 left">
                <div class="title">Test Event</div>
                <div class="details">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam bibendum ut sem sed sagittis.</p>
                    <div class="rsvp">RSVP</div>
                    <div class="facebook"></div>
                    <div class="twitter"></div>
                </div>
            </div>
        </div>
        <div class="event">
            <div class="date large-2 medium-2 left"><span class="day">20</span><span class="dayofweek">SUN</span></div>
            <div class="description large-10 medium-10 left">
                <div class="title">Test Event 2</div>
                <div class="details">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam bibendum ut sem sed sagittis.</p>
                    <div class="rsvp">RSVP</div>
                    <div class="facebook"></div>
                    <div class="twitter"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="large-2 medium-2 columns">&nbsp;</div>
</div>

我想将样式应用于第一个实例的“description”div EXCEPT的每个实例，有人能告诉我我将使用哪个选择器吗？谢谢！

Answer 1

目前无法使用CSS本地执行此操作：请参阅this question.

然而，一种方法是使用jQuery应用样式：

$($(".description")[0]).css({

    background: "red",
    width: "40%"

});

JSFiddle

您还可以创建一个包含更改的CSS类，并使用jQuery将其应用于第一个元素：

$($(".description")[0]).addClass("first-description");

JSFiddle

Answer 2

你不能按照你想要的方式设置所有div标签的样式，然后使用first-of-type覆盖第一个div上的所有样式吗？

Answer 3

如果您不想为div设置样式，请删除该类并使用另一个类，或者您可以添加类似.first的内容并根据需要设置样式。

我这样说，因为似乎没有选择器。

如何仅设置此div的第一个实例的样式

3 个答案:

JSFiddle

JSFiddle