预备知识点

:not() 伪类选择器

:not() 伪类选择器可以排除掉括号内的选择器。

<div class="box">
    <p>三眼鸭的编程教室</p>
    <p class="two">三眼鸭的编程教室</p>
    <p>三眼鸭的编程教室</p>
</div>
<style>
    /* .box 中除了 .two 以外的元素 */
    .box :not(.two) {
        color: teal;
    }
</style>

$$demo

<p>三眼鸭的编程教室</p>

<p class="two">三眼鸭的编程教室</p>

<p>三眼鸭的编程教室</p>

</div>

<style>

.box :not(.two) {

color: teal;

}

</style>

:last-child 伪类选择器

:last-child 可以匹配兄弟元素中的最后一个元素。

<div class="box">
    <p>三眼鸭的编程教室</p>
    <p>三眼鸭的编程教室</p>
    <p>三眼鸭的编程教室</p>
    <p>三眼鸭的编程教室</p>
</div>
<style>
    /* .box 子元素中最后一个元素 */
    .box > :last-child {
        color: teal;
    }
</style>

$$demo

<div class="box"> <p>三眼鸭的编程教室</p> <p>三眼鸭的编程教室</p> <p>三眼鸭的编程教室</p>

<p>三眼鸭的编程教室</p> </div> <style> .box > :last-child { color: teal; } </style>

$$tip

:first-child 为匹配兄弟元素中的第一个元素，不过多举例。

除了最后一个元素

组合 :not() 与 :last-child 便可以选择兄弟元素中除了最后一个元素外的元素。

<div class="box">
    <p>三眼鸭的编程教室</p>
    <p>三眼鸭的编程教室</p>
    <p>三眼鸭的编程教室</p>
    <p>三眼鸭的编程教室</p>
</div>
<style>
    /* .box 子元素中除了最后一个元素外的所有元素 */
    .box > :not(:last-child) {
        color: teal;
    }
</style>

$$demo

<p>三眼鸭的编程教室</p>

</div>

<style>

.box > :not(:last-child) {

color: teal;

}

</style>

文章列表实例

$$tip

可以用 :not(:last-child) 排除掉最后一个元素的分割线。

$$tip

以下代码可以设置当文本超过一定行数时被裁剪，同时尾部显示省略号。详情参阅 MDN 的 webkit-line-clamp 章节。

.line-clamp {
    /* 超过两行显示省略号:start */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    /* 超过两行显示省略号:end */
}

$$demo <div class="container"> <div class="row"> <div class="text"> <h3 class="title"> 进击的巨人进击的巨人进击的巨人进击的巨人进击的巨人进击的巨人进击的巨人进击的巨进击 </h3> <div class="expand"> <p class="excerpt"> 进击的巨人进击的巨人进击的巨人进击的巨人进击的巨人进击的巨人进击的巨人进击的巨进击进击的巨人进击的巨人进击的巨人进击的巨人进击的巨人进击的巨人进击的巨人进击的巨进击 </p> </div> <p class="info"> <span>40 万热度</span> <span>1000 点赞</span> <span>200 评论</span> </p> </div> <img class="thumbnail" src="https://3yya.com/jinji-small.jpg" alt="thumbnail" /> </div> <div class="row"> <div class="text"> <h3 class="title"> 进击的巨人进击的巨人进击的巨人进击的巨人进击的巨人进击的巨人进击的巨人进击的巨进击 </h3> <div class="expand"> <p class="excerpt">进击的巨人进击的巨人进击的巨人</p> </div> <p class="info"> <span>40 万热度</span> <span>1000 点赞</span> <span>200 评论</span> </p> </div> <img class="thumbnail" src="https://3yya.com/jinji-small.jpg" alt="thumbnail" /> </div> <div class="row"> <div class="text"> <h3 class="title">进击的巨人进击的巨人</h3> <div class="expand"> <p class="excerpt">进击的巨人进击的巨人进击的巨人</p> </div> <p class="info"> <span>40 万热度</span> <span>1000 点赞</span> <span>200 评论</span> </p> </div> <img class="thumbnail" src="https://3yya.com/jinji-small.jpg" alt="thumbnail" /> </div> </div> <style> :root { box-sizing: border-box; /* 设置根元素的 box-sizing: border-box */ } *, *:before, :after { box-sizing: inherit; / box-sizing 继承自父元素 */ }

.container {
    max-width: 600px;

    padding: 0 20px;
    margin: 0 auto;
}

.container h3,
.container p {
    margin: 0;
}

.row {
    height: 160px;

    display: flex;
    justify-content: space-between;

    gap: 20px;

    padding: 20px 0;
}

.row:not(:last-child) {
    border-bottom: 1px solid #999;
}

.row .title {
    /* 超过一行显示省略号:start */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    /* 超过两行显示省略号:end */

    margin-bottom: 10px;
}

.row .text {
    display: flex;
    flex-direction: column;
}

.row .expand {
    flex-grow: 1;
}

.row .excerpt {
    /* 超过两行显示省略号:start */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    /* 超过两行显示省略号:end */
}

.row .info {
    /* 超过一行显示省略号:start */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    /* 超过两行显示省略号:end */

    font-size: 14px;
    color: #666;
}

.row .info span {
    margin-right: 20px;
}

.row .thumbnail {
    height: 100%;

    aspect-ratio: 16 / 9;
    object-fit: cover;

    border-radius: 8px;
}

</style> $$

$$answer

<div class="container">
    <div class="row">
        <div class="text">
            <h3 class="title">
                进击的巨人进击的巨人进击的巨人进击的巨人进击的巨人进击的巨人进击的巨人进击的巨进击
            </h3>
            <div class="expand">
                <p class="excerpt">
                    进击的巨人进击的巨人进击的巨人进击的巨人进击的巨人进击的巨人进击的巨人进击的巨进击进击的巨人进击的巨人进击的巨人进击的巨人进击的巨人进击的巨人进击的巨人进击的巨进击
                </p>
            </div>
            <p class="info">
                <span>40 万热度</span>
                <span>1000 点赞</span>
                <span>200 评论</span>
            </p>
        </div>
        <img
            class="thumbnail"
            src="https://3yya.com/jinji-small.jpg"
            alt="thumbnail"
        />
    </div>
    <div class="row">
        <div class="text">
            <h3 class="title">
                进击的巨人进击的巨人进击的巨人进击的巨人进击的巨人进击的巨人进击的巨人进击的巨进击
            </h3>
            <div class="expand">
                <p class="excerpt">进击的巨人进击的巨人进击的巨人</p>
            </div>
            <p class="info">
                <span>40 万热度</span>
                <span>1000 点赞</span>
                <span>200 评论</span>
            </p>
        </div>
        <img
            class="thumbnail"
            src="https://3yya.com/jinji-small.jpg"
            alt="thumbnail"
        />
    </div>
    <div class="row">
        <div class="text">
            <h3 class="title">进击的巨人进击的巨人</h3>
            <div class="expand">
                <p class="excerpt">进击的巨人进击的巨人进击的巨人</p>
            </div>
            <p class="info">
                <span>40 万热度</span>
                <span>1000 点赞</span>
                <span>200 评论</span>
            </p>
        </div>
        <img
            class="thumbnail"
            src="https://3yya.com/jinji-small.jpg"
            alt="thumbnail"
        />
    </div>
</div>
<style>
    :root {
        box-sizing: border-box; /* 设置根元素的 box-sizing: border-box */
    }
    *,
    *:before,
    *:after {
        box-sizing: inherit; /* box-sizing 继承自父元素 */
    }

    .container {
        max-width: 600px;

        padding: 0 20px;
        margin: 0 auto;
    }

    .container h3,
    .container p {
        margin: 0;
    }

    .row {
        height: 160px;

        display: flex;
        justify-content: space-between;

        gap: 20px;

        padding: 20px 0;
    }

    .row:not(:last-child) {
        border-bottom: 1px solid #999;
    }

    .row .title {
        /* 超过一行显示省略号:start */
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        /* 超过两行显示省略号:end */

        margin-bottom: 10px;
    }

    .row .text {
        display: flex;
        flex-direction: column;
    }

    .row .expand {
        flex-grow: 1;
    }

    .row .excerpt {
        /* 超过两行显示省略号:start */
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        /* 超过两行显示省略号:end */
    }

    .row .info {
        /* 超过一行显示省略号:start */
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        /* 超过两行显示省略号:end */

        font-size: 14px;
        color: #666;
    }

    .row .info span {
        margin-right: 20px;
    }

    .row .thumbnail {
        height: 100%;

        aspect-ratio: 16 / 9;
        object-fit: cover;

        border-radius: 8px;
    }
</style>