1. CSS 基础

  2. 取值单位

  3. 外观样式

  4. 布局样式

  5. 动画样式

  6. 工具与规范

  7. 实例练习

预备知识点

:not() 伪类选择器

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

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

$$demo

<div class="box">

<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

<div class="box">

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

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

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

<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

<ul class="articles">

<li>

<section>

<span class="content">

<h3 class="title">

进击的巨人进击的巨人进击的巨人进击的巨人进击的巨人进击的巨人进击的巨人进击的巨进击的巨人进击的巨人进击的巨进击的巨人进击的巨人进击的巨

</h3>

<p class="excerpt">进击的巨人进击的巨人进击的巨人</p>

<p class="info">

<span>40 万热度</span>

<span>1000 点赞</span>

<span>200 评论</span>

</p> </span

<img

class="thumbnail"

src="https://3yya.com/jinji-small.jpg"

alt="缩略图"

/>

</section>

</li>

<li>

<section>

<span class="content">

<h3 class="title">

进击的巨人进击的巨人进击的巨人进击的巨人进击的巨人

</h3>

<p class="excerpt">

进击的巨人进击的巨人进击的巨人进击的巨人进击的巨人进击的巨人进击的巨人进击的巨人进击的巨进击的巨人进击的巨人进击的巨人

击的巨人进击的巨人进击的巨人进击的巨人进击的巨人进击的巨进击的巨人进击的巨人进击的巨人进击的巨人进击的巨人进击的巨人进击的巨人进击的巨人

</p>

<p class="info">

<span>40 万热度</span>

<span>1000 点赞</span>

<span>200 评论</span>

</p> </span

<img

class="thumbnail"

src="https://3yya.com/jinji-small.jpg"

alt="缩略图"

/>

</section>

</li>

<li>

<section>

<span class="content">

<h3 class="title">进击的巨人进击的巨人</h3>

<p class="excerpt">

进击的巨人进击的巨人进击的巨人进击的巨人进击的巨人进击的巨人进击的巨人进击的巨人进击的巨人

</p>

<p class="info">

<span>40 万热度</span>

<span>1000 点赞</span>

<span>200 评论</span>

</p> </span

<img

class="thumbnail"

src="https://3yya.com/jinji-small.jpg"

alt="缩略图"

/>

</section>

</li>

</ul>

<style>

:root {

box-sizing: border-box; /* 设置根元素的 box-sizing: border-box */

}

*,

*:before,

*:after {

box-sizing: border-box; /* box-sizing 继承自父元素 */

}

.articles {

width: 640px;

margin: 80px auto;

list-style: none;

padding: 0;

}

.content {

display: inline-block;

width: 430px;

vertical-align: middle;

margin-right: 10px;

}

.title {

margin: 0;

font-size: 20px;

line-height: 30px;

height: 60px;

/* 超过两行显示省略号 */

overflow: hidden;

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

text-overflow: ellipsis;

/* 超过两行显示省略号 */

}

.excerpt {

font-size: 14px;

color: #666;

margin: 0;

line-height: 20px;

height: 40px;

/* 超过两行显示省略号 */

overflow: hidden;

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

text-overflow: ellipsis;

/* 超过两行显示省略号 */

}

.info {

font-size: 12px;

color: #999;

margin: 0;

line-height: 20px;

}

.info span {

margin-right: 10px;

}

.thumbnail {

display: inline-block;

width: 200px;

height: 120px;

object-fit: cover;

border-radius: 8px;

vertical-align: middle;

}

.articles li:not(:last-child)::after {

content: "";

display: block;

height: 2px;

margin: 20px 0;

background-color: #eee;

}

</style>

$$