Question

我想使用:last-of-type选择器选择我正在创建的页面菜单中的最后一个按钮元素。但它没有按预期工作，我找不到原因：/

HTML：

<div id="MediaHTML">
    <div id="MediaInnholdFortegnelse">
        <h1>MEDIA KATEGORIER</h1>
        <button type="button", id="MIF-Bilder">
            <div class="MIF-ButtonContent">
                <i class="material-icons md-c">arrow_drop_down</i>
                <p>Bilder</p>
            </div>
        </button>
        <div id="MIF-Bilder-Content", class="MIF-Content">
        <button type="button", id="MIF-Lydfiler">
            <div class="MIF-ButtonContent">
                <i class="material-icons md-c">arrow_drop_down</i>
                <p>Lydfiler</p>
            </div>
        </button>
        <div id="MIF-Lydfiler-Content", class="MIF-Content">
        <button type="button", id="MIF-Videoer">
            <div class="MIF-ButtonContent">
                <i class="material-icons md-c">arrow_drop_down</i>
                <p>Videoer</p>
            </div>
        </button>
        <div id="MIF-Videoer-Content", class="MIF-Content">
        <button type="button", id="MIF-Skjema">
            <div class="MIF-ButtonContent">
                <i class="material-icons md-c">arrow_drop_down</i>
                <p>Skjema</p>
            </div>
        </button>
        <div id="MIF-Skjema-Content", class="MIF-Content">
    </div>
</div>

我想使用的CSS：

#MediaInnholdFortegnelse > button:last-of-type {
    padding-bottom: 0.46vw;
}

我希望它能够选择最后一个按钮元素，但它会选择第一个按钮元素。我对HTML / CSS很陌生，所以它可能很明显，但在一些帮助下会很好。谢谢。

Answer 1

你没有关闭这些div

<div id="MIF-Bilder-Content", class="MIF-Content">

<div id="MIF-Lydfiler-Content", class="MIF-Content">

<div id="MIF-Videoer-Content", class="MIF-Content">

因为你没有关闭div，所以按钮被视为这些div的子节点，因此它不再是MediaInnholdFortegnelse的直接子节点，因此第一个按钮将始终是{的最后一个子节点。 {1}}

修改后的代码

MediaInnholdFortegnelse

#MediaInnholdFortegnelse > button:last-of-type {
    padding-bottom: 0.46vw;
  color:#f00;
}

Answer 2

If each button have a parent div, you need to use div:last-of-type button

#MediaInnholdFortegnelse > .MIF-Content:last-of-type button {
    padding-bottom: 100px;
}

I've made an example:

https://jsfiddle.net/d3xj03tq/1/

Answer 3

You are using ">" Sign in your CSS. It catches only the immediate children. And the first button is the only immediate children here. And also check your div tags. Maybe you did not finish your div tags in your code

CSS：last-of-type选择器未按预期工作

3 个答案: