javascript - 显示文章的第一部分 (HTML/JavaScript)

Question

如何只显示文章的第一部分，类为 .class1。我首先隐藏了所有元素，并且应该只显示文章的类 .class1 的第一部分。我想过一些关于 :firstChild 的事情，但我没有经验，我不知道如何解决这个问题。

<article class="x class1">
    <section>
        <p>1</p>
    </section>
    <section>
        <p>1</p>
    </section>
</article>
<article class="x class2">
    <section>
        <p>2</p>
    </section>
    <section>
        <p>2</p>
    </section>
</article>
<script type="text/javascript">

        $(document).ready(function () {

            $(".x").hide()

        });
</script>

Answer 1

仅使用 CSS:

article {
   display: none;
}

article[class*="class1"] {
   display: inherit;
}

article[class*="class1"] section:nth-child(2) {
    display: none;
}

Live example on the jsFiddle

兼容性

• IE7+
• 火狐
• Chrome
• Safari
• 歌剧