fuchencong

The way I am

0%

HTML 与 CSS 基础（3）：CSS 复合选择器

发表于 分类于

这篇文章继续学习 CSS 基础知识，主要学习 CSS 复合选择器、CSS 元素显示模式等知识，同时会还会介绍 Emmet 语法，它能提高 HTML/CSS 代码的编写速度。

CSS 复合选择器

之前说过，CSS 选择器主要有两大类：基础选择器和复合选择器。复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的：

  • 复合选择器可以更准确、更高效地选择目标元素
  • 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
  • 常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等

后代选择器

后台选择器又被称为包含选择器，可以选择祖先元素中的后代元素，其语法规则为

1
2
3
ancestor descendant {
    样式声明;
}
  • ancestor descendant 分别表示祖先元素和后代元素，它们之间用空格分隔
  • ancestor descendant 可以是任何基础选择器，最终选择的是 ancetor 中的后代元素 descendant
  • descendant 可以是 ancestor 的任意层级后代元素（儿子、孙子等等）

如下是一个示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<head>
    <style>
        div li {
            color: red;
        }
        div ul li {
            color: blue;
        }

    </style>
</head>
<body>
    <div>
        <ul>
            <li>test1</li>
        </ul>
        <ol>
            <li>test2</li>
        </ol>
    </div>
</body>

子选择器

子元素选择器（子选择器）只能选择某一元素的最近一级子元素，即直接子元素，其语法规则为：

1
2
3
parent > child {
    样式声明；
}
  • parent 和 child 分别表示父元素和子元素，它们之间用 > 分隔
  • child 必须是 parent 的直接后代，不能是孙子元素等

并集选择器

并集选择器可以选择多组标签，为它们定义相同的样式。通常用于集体声明。并集选择器是各个选择器之间用 , 分隔，任何形式的选择器都可以作为并集选择器：

1
2
3
selector1, selector2 {
    样式声明;
}

如下是一个示例：

1
2
3
4
#google,
#baidu {
    color: green;
}
  • 习惯将并集选择器的多个 selector 用多行书写
  • 最后一个 selector 之后不需要添加 ,

伪类选择器

伪类选择器用于定义某些选择器的特殊状态，或者选择第 1 个、2 个… n 个元素。伪类选择器使用冒号来表示，例如 :hover、:first-child 等。有很多伪类选择器，这里先介绍最常用的 链接伪类选择器 以及 :focus 伪类选择器。

  • a:link 选择所有未被访问的链接
  • a:visited 选择所有已被访问的链接
  • a:hover 选择鼠标指针位于其上的链接
  • a:active 选择活动链接（鼠标未弹起的连接）

如下是一个示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
a:link {
    color: red;
}

a:visited {
    color: aqua;
}

a:hover {
    color: blueviolet;
}

a:active {
    color:bisque
}
  • 为了确保样式生效，一般按照 LVHA 的顺序声明
  • 由于 a 链接在浏览器中具有默认样式，所以实际开发中一般都需要给链接单独指定样式
  • 实际开发中，一般只需要链接的常规状态（a）和 hover 状态（a:hover）定义样式即可

:focus 伪类选择器用于选择获取焦点的表单元素。焦点就是光标，一般只有表单元素才能获取光标，因此这个伪类选择器主要用于表单元素上。

1
2
3
input:focus {
    background-color: yellow;
}

CSS 的元素显示模式

网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好地布局我们的网页。元素显示模式就是元素（标签）以什么方式进行显式，例如 <div> 会独占一行，而多个 span 可以在同一行显示。HTML 元素一般分为块元素和行内元素两种类型。

常见的块元素有 <h1>-<h6>, <p>, <div>, <ul>, <ol>, <li>，div 是最典型的块元素。块元素的特点：

  • 独占一行显示
  • 高度、宽度、外边距、内边距都可以控制
  • 宽度默认是容器（父级）宽度的 100%
  • 是一个容器及盒子，里面可以放行内或块级元素

注意事项：

  • 文字类的元素内不能使用块级元素。<p> 标签、<h1>-<h6> 等标签一般都用于存放文字，它们都属于文字类的元素，里面不能放其他块级元素。因此 <p> 标签内是不能存放 <div> 标签的。

常见的行内元素有 <a>, <strong>, <b>, <em>, <i>, <del>, <s>, <ins>, <u>, <span> 等，其中 <span> 是最典型的行内元素。行内元素的特点：

  • 相邻行内元素会在一行显示，一行可以显示多个行内元素
  • 高、宽设置是无效的
  • 默认宽度就是它本身内容的宽度
  • 行内元素只能容纳文本或者其他行内元素

注意下事项：

  • 链接标签 <a> 内不能再放置链接
  • <a> 标签内可以放块级元素，但是给 <a> 转换一下块级模式更安全

对比下块级元素和行内元素的宽度、高度规则：

  • 块级元素：

    • 默认情况下，宽度自动撑满父容器。若显式设置了宽度，则按照设置的值来
    • 默认情况下，高度由其内容撑开。若显式设置了高度，则按照设置的值来。

  • 行内元素：

    • 无法设置 width 和 height
    • 它们的大小完全由其内容撑开

在行内元素中有几个特殊的标签，<img />、<input />, <td>，它们同时具有行内元素和块级元素的特性，有时会将它们称为行内块元素。行内块元素的特点：

  • 和相邻行内元素在一行上，一行可以显示多个（行内元素的特点）
  • 默认宽度就是它本身内容的宽度（行内元素的特点）
  • 高度、行高、外边距、内边距都可以控制（块级元素的特点）

元素显示模式转换

特殊情况下，我们需要元素显示模式的转换。简单理解就是：一个模式的元素需要另一种模式的特性，例如要增加链接 <a>（行内元素）的触发范围（设置宽度、高度），就需要将 <a> 的显示模式转换块级元素。

在 CSS 中，可以通过 display 属性将元素的显示模式转换为其他类型。常用的值有：

  • block 将元素设置为块级元素
  • inline 将元素设置为行内元素
  • inline-block 将元素设置为行内块元素

例如，要将一个 <a> 标签的显示模式转换成块级元素，可以这样写：

1
2
3
4
5
6
7
a {
    width: 200px;
    height: 200px;
    background-color: yellow;

    display: block;
}

如下则将 <span> 标签的显示模式转换为行内块元素：

1
2
3
4
5
6
7
8
span {
    width: 200px;
    height: 200px;
    color: green;
    background-color: brown;

    display: inline-block;
}

一个示例：小米侧边栏

下面的代码实现了一个简单小米官网侧边栏布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米侧边栏</title>
    <style>
        a {
            background-color: #55585a;
            width: 230px;
            height: 40px;
            display: block;
            text-decoration: none;
            font-size: 14px;
            text-indent: 2em;
            color: white;
            font-family: "Microsoft yahei";
            line-height: 40px;
        }

        a:hover {
            background-color: #ff6700;
        }
    </style>
</head>
<body>
    <a href="#">手机 电话卡</a>
    <a href="#">电视 盒子</a>
    <a href="#">笔记本 平板</a>
    <a href="#">出行 穿戴</a>
    <a href="#">智能 路由器</a>
    <a href="#">健康 儿童</a>
    <a href="#">耳机 音响</a>
</body>
</html>

其中效果如下：

这里需要注意的一处 CSS 效果是实现文字垂直居中，它使用的技巧是 让文字的行高等于盒子的高度，就可以让文字在当前盒子内垂直居中。它的原理是这样：

  • 行高 = 上边距 + 文字高度 + 下边距
  • 当行高等于盒子高度时，上边距和下边距的自动调整（平均分配），就能让文字自动垂直居中了

CSS 背景

通过 CSS 背景属性，可以给页面元素添加背景样式。背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

背景颜色

backgroud-color 属性用于设置元素的背景颜色。其语法规则为：

1
background-color: transparent | color;
  • 一般情况下，元素的背景颜色默认值是 transparent，也可以手动设置背景颜色为 transparent

背景图片

background-image 属性用于设置元素的背景图片，背景图片常见于 logo、一些装饰性的小图片、或者超大的背景图片。优点是非常便于控制位置（精灵图也是一种运用场景）。其语法规则为：

1
background-image: none | url(url);
  • none：表示无背景图片
  • url：使用绝对或者相对地址指定背景图像。url 里面的路径不需要加引号

页面元素既可以添加背景颜色，也可以添加背景图片，如果同时设置背景颜色和背景图片，背景图片会覆盖在背景颜色的上面。

背景平铺

background-repeat 属性用于设置背景图片的平铺方式。其语法规则为：

1
background-repeat: repeat | no-repeat | repeat-x | repeat-y;
  • repeat：默认值，背景图像在垂直和水平方向上平铺
  • no-repeat：不平铺
  • repeat-x：背景图像在水平方向上平铺
  • repeat-y：背景图像在垂直方向上平铺

背景图片位置

background-position 属性用于设置背景图片的位置。其语法规则为：

1
background-position: x y;

x 和 y 分表表示水平和垂直坐标，可以使用方位词或者精确单位：

  • 方位词：top | bottom | left | right | center
  • 精确单位：百分数 | 由浮点数和单位标识符组成的长度值

如果参数使用方位词，则两个值的顺序无关，例如 left top 和 top left 效果相同。因为浏览器可以自动根据方位词推断出其指定的是 x 位置还是 y 位置。一旦确定某个值是 x 位置还是 y 位置，另外一个值也就自动确定了。

  • left/right：肯定是指定 x 位置
  • topp/bottom：肯定是指定 y 位置

如果只指定了一个方位名词，另一个省略，则第二个值默认居中对齐。

如果参数值是精确坐标，第一个参数必须是 x 位置，第二个参数必须是 y 位置。如果只指定了一个数值，那么该数值一定是 x 坐标，另一个默认垂直居中。

方位名词和精确坐标也可以混合使用，此时第一个值必须是 x 坐标，第二个值必须是 y 坐标，例如：

1
background-position: left 50px;

而如下设置则是无效的，因为 x 坐标设置为 top 是无效的。

1
background-position: top 50px;

背景图像固定（背景附着）

background-attachment 属性用于设置背景图像是否固定或者随着页面的其余部分滚动。其语法规则为：

1
background-attachment: scroll | fixed;
  • scroll：默认值，背景图像是随对象内容滚动的
  • fixed：背景图像固定

背景复合写法

为了简化背景属性的代码，可以将背景属性的各个值合并写入一个背景复合属性 backgroud 中。当使用简写形式时，没有特定的顺序，一般习惯约定顺序为：

1
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置；

例如：

1
background: transparent url(images/bg.jpg) no-repeat fixed left 50px;

背景色半透明

CSS3 提供了背景颜色半透明的效果，其语法规则为：

1
background: rgba(0, 0, 0, 0.5);
  • rgba 中的最后一个参数是 alpha 透明度。其取值范围在 0~1 之间：0 表示完全透明，1 表示完全不透明
  • 习惯将 0.5 中的 0 省略掉，写成 rgba(0, 0, 0, .5)
  • 注意，这个效果设置的是背景色半透明，盒子里面的内容不受影响

Emmet 语法

Emmet 语法的前身是 Zen coding，它使用缩写来提高 HTML/CSS 代码的编写速度。VS code 内部已经集成了该语法。

快速生成 HTML 结构

  • 直接输入标签名，然后按 Tab 键，可快速生成对应的 HTML 标签结构
  • 相生成多个相同的标签，输入 标签名*数字，然后按 Tab 键，即可生成对应个数的 HTML 标签，例如 div*3 即可生成 3 个 div 标签
  • 对于有父子关系的标签，可以使用 parent>child，然后再按 Tab 键，即可快速生成对应的嵌套 HTML 结构，例如 ul>li，即可快速生成：
1
2
3
<ul>
    <li></li>
</ul>
  • 对于有兄弟关系的标签，使用 label1+label2，然后再按 Tab 键即可快速生成对应的并列 HTML 结构，例如 div+p 即可快速生成：
1
2
<div></div>
<p></p>
  • 如果要生成带有指定类名或 ID 名的标签，可以使用 mark.classname 或 mark#idname，然后再按 Tab 键，即可生成具有特定类名或 ID 属性的 mark 标签。如果省略 mark，则默认生成的是 div 标签，例如 .test 或 #test，即可快速生成：
1
2
<div class="test"></div>
<div id="test"></div>
  • 如果想生成的类名、标签名带有自增顺序，可以借助 $，例如 h1.test$*3 可以生成如下结构：
1
2
3
<h1 class="test1"></h1>
<h1 class="test2"></h1>
<h1 class="test3"></h1>

div#id$*3 可以生成如下结构：

1
2
3
<div id="id1"></div>
<div id="id2"></div>
<div id="id3"></div>
  • 如果想要在生成的标签内部写入内容，可以使用 {}，例如 div{hello} 可以生成如下结构：
1
<div>hello</div>

快速生成 CSS 样式

Emmet 语法同样适用于 CSS，它采用缩写形式即可快速生成 CSS 样式，以下是个几个示例：

  • w 再按 Tab 键，可以快速生成 width: ;
  • ti 再按 Tab 键，可以快速生成 text-indent: ;
  • fsi 再按 Tab 键，可以快速生成 font-style: italic;

Reference