【响应式Web设计】读书笔记

【简介】CSS 结构化伪类、相对视口的长度单位。

1. CSS 结构化伪类

CSS 结构化伪类为我们提供了更多基于元素之间的位置关系选择它们的选择符。常用的结构化伪类有：

• : first-child
• : last-child
• : nth-child

HTML 片段为 10 个<span> 标签：

<span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>

CSS 样式为：

span{    height: 2rem;    width: 2rem;    margin: .5rem;    background-color: #999;    display: inline-block;}

浏览器显示效果为并排的 10 个正方形：

通过 first-child 选中第一个元素，使第一个元素变为圆形：

span:first-child {    border-radius: 50%;}

通过 last-child 选中最后一个元素，使最后一个元素变为圆形：

span:last-child {    border-radius: 50%;}

通过 nth-child 选中奇数个元素，使奇数个元素变为圆形：

span:nth-child(odd) {    border-radius: 50%;}

通过 nth-child 使用表达式选中特定元素，从第三项开始，每两项选择一项为圆形：

span:nth-child(2n+3) {    border-radius: 50%;}

2. 其他伪类选择符

• : not 取反，用于选择「非······」
• : empty 为空

2.1 : not 取反

HTML 片段：

<div class="a-div"></div><div class="a-div"></div><div class="a-div"></div><div class="a-div not-me"></div><div class="a-div"></div>

CSS 为：

div {    display: inline-block;    height: 2rem;    width: 2rem;    background-color: blue;}

显示的效果：

添加一段 CSS 选择器：

.a-div:not(.not-me) {    background-color: orange;    border-radius: 50%;}

则所有不包含.not-me 类的元素添加橙色背景和圆角；

2.2 ：empty

HTML 和 CSS 如下：

<div class="thing"></div>.thing:empty {    display: none;}

虽然 div 内没有内容，但仍然可以看到背景颜色；要在没有内容的情况下，隐藏元素。添加 empty 选择符即可。

.thing:empty {    display: none;}

此时，元素被隐藏，当元素内有内容的时候，元素显示。

3. 相对视口大小

CSS3 引入了相对视口的长度单位：

• vw：视口宽度
• vh：视口高度
• vmin：视口中的最小值，等于 vw 或 vh 中较小的值
• vmax：视口中的最小值，等于 vw 或 vh 中较大的值

上面的每一种单位都是视口的某种形式的百分比；

例如想要一个高度为浏览器窗口高度 90% 的模态弹层：

.modal {   height: 90vh;}