【H2O2|全栈】关于CSS（2）CSS基础（二）

CSS基础知识

前言

准备工作

选择器的组合

盒模型

示例网页代码

后代选择器

亲代选择器

相邻兄弟选择器

后续兄弟选择器

多个元素选择器

通配符选择器

优先级

其他应用

伪类

锚链接的属性

列表的属性

list-style-type

list-style-position

list-style-image

伪元素

表格的属性

border

border-collapse

caption-side

table-layout

预告和回顾

后话

CSS基础知识

前言

本系列博客将分享层叠样式表（CSS）有关的知识点。

作为本系列的第二篇，本文主要讲解选择器的组合，链接、列表、表格的属性，以及背景属性。

不是专业的科普博主，主打一个分享知识，写的不好，多多包涵（哈哈）。

准备工作

软件：【参考版本】Visual Studio Code

插件（扩展包）：Office Viewer(Markdown Editor)

浏览器版本：Chrome

系统版本： Win10/11/其他非Windows版本

*我的电脑是Win10的版本，仅供参考*

选择器的组合

盒模型

盒模型就是一个几乎没有任何基础样式的块元素标签——div。它自带的样式如下：

就像span标签，实质上就是一个几乎没有任何基础样式的行内元素标签。

其实，所有的标签都只不过是有预设样式的块标签或者行内标签罢了。

关于div的内容暂时了解这么多就可以了，下一期本系列的博客将分享div的相关使用。

示例网页代码

本节中用到的案例的初始主体标签中的代码（无CSS样式的）：

<div class="d1">
        <p class="p1">第一段落</p>
        <p class="p2">第二段落</p>
        <p class="p3">第三段落</p>

        <span class="sp1">第一个文本</span><br />
        <span class="sp2">第二个文本</span><br />
        <span class="sp3">第三个文本</span><br />

        <div class="d2">
            <p class="p4">第四段落</p>
            <p class="p5">第五段落</p>
            <p class="p6">第六段落</p>
        </div>
    </div>

后代选择器

选择器之间以空格分隔，选择所有后代（可以隔代）选择器。

选择案例中class="d1"（以下简称d1，其余同理）的全部后代p标签，可以使用如下代码：

.d1 p {
            font-size: large;
            font-weight: 700;
            color: aqua;
        }

运行之后的效果如下：

可以看到，d1所有的p后代都被设置了样式。

亲代选择器

选择器之间以 > 分隔，选择当前元素的直接子代选择器。

如果只想设置d1的直接（第一级）子代，则可以使用如下代码：

.d1>p {
            font-size: large;
            font-weight: 700;
            color: aqua;
        }

运行之后的效果如下：

这样就不会影响d2的效果了。

相邻兄弟选择器

选择器之间以 + 分隔，选择某元素同亲代、向后相邻的同标签元素。

比如，选择p1的下一个同级的p标签p2设置样式，代码如下：

.p1+p {
            font-size: large;
            font-weight: 700;
            color: aqua;
        }

运行之后的效果如下;

后续兄弟选择器

选择器之间以 ~ 分隔，选择某元素同亲代、同级的所有同标签元素。

比如，选择d1的子代一级中p1之后的所有p标签，代码如下;

.p1~p {
            font-size: large;
            font-weight: 700;
            color: aqua;
        }

运行之后的效果如下;

多个元素选择器

选择器之间以 , 分隔，选择多个元素。

比如，设置d1中的所有p标签和span标签样式，使用如下代码：

.d1>p,
.d1>span {
            font-size: large;
            font-weight: 700;
            color: aqua;
        }

运行之后的效果如下：

通配符选择器

格式是一个单独的 * ，选中所有元素，用于清除元素的默认样式（预设为自定义的样式）。

比如，浏览器中默认的字体大小为16px，黑色，无加粗，现在利用通配符将它们设置为我想要的默认样式：

* {
            font-size: large;
            font-weight: 700;
            color: aqua;
        }

那么，如果不设置其他属性，那么在示例网页中显示的文本样式默认为：

优先级

对于组合选择器，取对应的选择器类型的权重相加之后再进行比较。

比如，对于下面这两段代码：

.d1 .sp1 {
            font-size: large;
            font-weight: 700;
            color: aqua;
        }

.d1>span {
            font-size: small;
            font-weight: 400;
            color: chartreuse;
        }

同样设置了sp1的样式，那么最后到底会显示aqua（天蓝色）还是chartreuse（亮黄色）的效果呢？

我们知道，类选择器的权重值为10，标签选择器的权重值为1。

那么，第一段样式代码的权重值就是10+10=20，第二段为10+1=11，显然，前者的权重值之和较大，所以最后显示的效果如下：

显然，sp1应用了权重值之和较大的样式。

那么，如果权重值之和相同，呢？比如，将上面的代码改成：

div>.sp1 {
            font-size: large;
            font-weight: 700;
            color: aqua;
        }

.d1>span {
            font-size: small;
            font-weight: 400;
            color: chartreuse;
        }

此时它们的权重值之和均为11，显示结果如下：

显然，天蓝色被亮黄色覆盖了，说明权重值之和相同时，将按照解析顺序，下面的样式向上覆盖。

同级的非组合选择器会出现下覆盖上的现象的原因和这里是相同的，都是由权重值决定了优先级。

其他应用

组合选择器还可以类比应用于HTML编写快捷输入操作。

比如，如果要快速输入下面这段代码，在VS code中可以怎么做呢？

<div>
        <p></p>
        <p></p>
        <p></p>
        <div>
            <p></p>
            <p></p>
            <p></p>
        </div>
    </div>

方法是，类似亲代选择器，使用最外层div选择直接子代，再由内层div选择直接子代。在子代数量不为1时，需要使用乘号（*）乘以数量。

这样一来，快速生成上面的代码的快捷输入就是（输完直接按回车确认）：

div>p*3div>p*3

类似的，也可以用相同的方式快速生成表格、列表等嵌套形式的HTML结构。

该方法在HBuilderX中也可以使用，其他的我没试过，诸位可以自行尝试。

伪类

伪类也是选择器的一种，格式是选择器加伪类名。

常见的伪类写法如下：

伪类	作用
:link	常见于锚链接，设置未访问时的属性
:visited	常见于锚链接，设置访问之后的属性
:hover	设置鼠标悬浮（移入）时的属性（所有元素可用）
:active	设置元素激活时的属性（所有元素可用）

emmm，除了锚链接，使用active设置激活状态在这里暂时不好举例，之后可以利用JS将某个元素直接置换为常态激活状态，如一些小图标的激活效果等。

这里举一个:hover的例子吧，我现在拿出我的头像，初始HTML代码如下：

<img src="https://profile-avatar.csdnimg.cn/4b2a87ef8c5d4789a6b8fb88457350a2_zc13786305863.jpg!1" alt="H2O2的头">

设置初始状态和鼠标悬浮状态的CSS代码如下：

img {
            width: 80px;
            height: 80px;
        }

img:hover {
            width: 160px;
            height: 160px;
        }

鼠标未移入图片和移入图片的效果对比如下：

其实，伪类还有更多的形式，这里主要是为了引出锚链接而拓展的一小部分内容，更多伪类的使用可能会在CSS进阶篇或JS系列博客去分享。

锚链接的属性

锚链接的默认样式如下：

状态	样式
未访问/光标移入	蓝色，下划线
访问后	紫色，下划线
光标点击（激活）	红色，下划线

由于锚链接有不同的实时状态，所以可以使用伪类选择器对每个状态的样式进行单独设置。

但是，需要注意的是，由于伪类选择器之间是同类选择器，解析有自上而下的顺序。

所以当伪类:hover（移入）和:active（激活）同时设置样式时，注意要先设置:hover再设置:active，否则:hover将覆盖:active的属性效果。

特别的，visited在访问后将保持该状态。即使刷新界面也不会重置这个状态。

列表的属性

列表的属性为list-style，按顺序依次简写下面三个属性的属性值，以空格分开：

list-style-type

该属性用于设置列表的标记。

什么是标记呢？还记得HTML入门中提到过的ul和ol的type属性吗，与这个属性的功能是相同的。

来看list-style-type的常见属性以及对应样式描述或举例：

属性值	样式	举例
none	无	\
disc	实心圆	\
circle	空心圆	\
square	实心方块	\
decimal	标记为数字	1 2 3 4
decimal-leading-zero	0开头的数字标记	01 02 03
upper-roman	大写罗马数字	I II III IV V
lower-roman	小写罗马数字	i ii iii iv v
upper-alpha	大写英文字母	A B C D
lower-alpha	小写英文字母	a b c d
lower-greek	小写希腊字母	alpha, beta, gamma
lower-latin	小写拉丁字母	a, b, c
upper-latin	大写拉丁字母	A, B, C, D
hebrew	传统的希伯来编号方式	\
armenian	传统的亚美尼亚编号方式	\
georgian	传统的乔治亚编号方式	an, ban, gan
cjk-ideographic	简单的表意数字	\
hiragana	日文平假名字符	a, i, u, e, o, ka, ki
katakana	日文片假名字符	A, I, U, E, O, KA, KI
hiragana-iroha	日文平假名序号	i, ro, ha, ni, ho, he, to
katakana-iroha	日文片假名序号	I, RO, HA, NI, HO, HE, TO

对HTML中的type而言，ul的标记只能是实心圆点、实心方块和实心圆圈等图形，且各li的图形相同；ol的标记只能是数字、英文大小写和罗马数字大小写等序号。

现在，我们可以将两类形式混合使用了。只需要单独定义li元素的list-style-type即可。

list-style-position

该属性用于定义列表项目标记放置位置，默认标记位置在文本以外。

该属性的值和对应的含义如下：

属性值	含义
outside	默认标记在文本外
inside	标记在文本内

用于比较两种效果的代码如下：

<ul>
        <li>我的标记在文本外</li>
        <li style="list-style-position: inside;">我的标记在文本内</li>
    </ul>

在浏览器中显示的效果如下：

看起来，设置了值inside的列表项比默认的情况稍稍后移了一些。

想要知道他们的区别，则需要使用F12快速检查代码。

可以看出两个列表项的文本内容的区别，后者的标记确实包含在文本中了：

list-style-image

该属性用于插入图片作为列表项目标记。

如果觉得列表的标记不太好看，种类不够丰富，那么就可以使用图片作为列表项的标记了。

默认值为none，即不引入图片。

或者使用url("图像的地址/路径")的方式引入图片，注意这里的图片不能自定义大小，需要提前调整好图片的大小再引入。

伪元素

如果想调整图片的大小，其实也是有办法的，这个时候就需要提出一个新的CSS3中的概念——伪元素。

之所以称之为“伪”，是因为它实质上是在浏览器渲染CSS时才加上的。

在W3C文档中，为了区别伪元素和伪类，将伪元素规范为以 :: 开头的形式。

常见的两个伪元素是::before和::after，分别用于将伪元素的内容添加至当前元素之前或之后。

伪元素必须指定内容属性content，否则将不起作用。可以为空。

具体的内容就不展开说了，这里只讲述如何调整图片大小。

比如，默认字体大小为16px，我们利用::before将图片缩小到16*16的大小放到列表项之前。

*注意把ul自带的标记给设置为none！*

CSS代码如下：

ul {
    list-style-type: none;
}

ul li::before {
    content: '';
    background-image: url("https://profile-avatar.csdnimg.cn/4b2a87ef8c5d4789a6b8fb88457350a2_zc13786305863.jpg!1");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: inline-flex;
    width: 16px;
    height: 16px;
}

HTML代码如下：

<ul>
        <li>列表项1</li>
        <li>列表项2</li>
    </ul>

在网页中的效果如下：

display属性暂时不需要了解，background相关的属性将在背景属性中讲述。

表格的属性

border

该属性按顺序依次简写下面三个属性的属性值：

border-weight

该属性用于设置表格的边框宽度，常用单位为px，%，rem，em，和其他使用这些单位的使用方法类似，不再赘述。

border-style

该属性用于设置表格的边框样式，类似text-decoration-style，不再赘述。

border-color

该属性用于设置表格的边框颜色，常用形式为颜色名、十六进制、rgb表示和rgba表示，类似text-decoration-color，不再赘述。

border-collapse

该属性用于设置表格的内外边框之间的间距，一般对table标签使用，类似于已经弃用的cellspacing属性。

它的属性值和对应的含义如下：

属性值	含义
separate	默认值内外边框分离
collapse	内外边框合并（塌陷）

可能有朋友注意到，我使用了类似这个词，说明其实这两者之间还是有一些差别的。

比如，对于两个完全相同的、规格为3*3且边框粗2px的表格来说，使用collapse的效果和使用cellspacing的效果对比如下：

可以看到后者比前者稍粗一些，这是因为前者是将内外边框完全合并，而后者只是将内外边框的间距设置为0罢了。

caption-side

该属性用于设置表格标题的位置，也就是caption标签元素的位置。

它的属性值和对应的效果如下：

属性值	效果
top	默认值标题在表格顶部
bottom	标题在表格底部

table-layout

该属性用于设置表格单元格的列宽的展现方式。

它的属性值和对应的含义如下：

属性值	含义
auto	默认自动由内容撑开由当前列最宽的单元格决定列宽
fixed	各个单元格的列宽独立设定且为固定值，与内容无关

利用这个属性，我们再想实现HTML入门章节中说过的列对齐不规则表格，就十分简单了。只需要给每一行的列设置独立的width即可，不再需要繁琐的列合并操作。

预告和回顾

在下一期博客中，我将会开始写CSS的背景属性以及盒模型的具体内容。

*因为篇幅过长，所以本应该在本期中的背景属性将迁移至下一期*

对CSS文件感兴趣的朋友，可以看下面的CSS专栏，当前为第二期：

专栏 | CSS入门http://t.csdnimg.cn/4bvCJ当然，也欢迎对全栈项目感兴趣的朋友查看我的其他专栏。

后话

在全栈领域，博主也只不过是一个普通的萌新而已。本系列的博客主要是记录一下自己学习的一些经历，然后把自己领悟到的一些东西总结一下，分享给大家。

文章全篇的操作过程都是笔者亲自操作完成的，一些定义性的文字加入了笔者自己的很多理解在里面，所以仅供参考。如果有说的不对的地方，还请谅解。

==期待与你在下一期博客中再次相遇==

——疑似有点缺氧的【H2O2】