目录
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即可，不再需要繁琐的列合并操作。
背景属性
背景属性使用的是background系列的属性，该属性在CSS3中出现，这里仅供了解。具体有下面几种：
background-color
该属性的作用是定义背景色。
除了常规的使用颜色名、十六进制、rgb和rgba四种属性值之外，还可以设置transparent，即透明效果。
不设置前四种属性，则默认为透明颜色。
background-image
该属性的作用是将图像设置为元素背景。
默认值为none（无效果），也可以使用ul("路径")调用图片。
background-repeat
该属性的作用是设置背景图片是否重复。
默认为repeat重复，可以设置为no-repeat不重复。
还可以单独设置repeat-x和repeat-y，即仅在水平或者仅在垂直方向重复。
出现在图片不足以覆盖所在元素背景的情况。
background-position
该属性用于设置背景图像的起始位置。
默认的位置是左上角。
该属性有两个值，分别对应水平位置和垂直位置，对应属性值如下：
| 水平位置 | 垂直位置 |
|---|---|
| left/center/right | top/center/bottom |
| px(左上角为原点，x轴正方向向右) | px(左上角为原点，y轴正方向向下) |
| %（50%为相对背景居中） | %（50%为相对背景居中） |
注意，如果只设置一个属性值，另一个值将默认为center。
background-size
该属性用于设置背景图片的大小。
填数值时，由水平尺寸和垂直尺寸组成，单位为px或%。只设置一个，另一个等比变化（auto）。
不填数值，则为单属性，属性值和含义如下：
| 属性值 | 含义 |
|---|---|
| cover | 覆盖，最小边占满背景，最大边会超出 |
| contain | 容器，最大边占满背景，最小边会压缩 |
特别的，对于cover属性，可以设置overflow属性，值为hidden（隐藏），将超出父元素的部分隐藏起来。
background-attachment
该属性用于设置背景图片是否伴随滚动。
它的属性值和对应的效果如下：
| 属性值 | 效果 |
|---|---|
| scroll | 默认值 背景图像随页面滚动而滚动 |
| local | 背景图像随内容滚动而滚动 |
| fixed | 背景图像相对背景静止 |
平时我们看到的背景图不动的网页，很多都可以由fixed完成。
预告和回顾
在下一期博客中，我将会开始写CSS的盒模型的具体内容。
对CSS文件感兴趣的朋友，可以看下面的CSS专栏，当前为第二期：
专栏 | CSS入门
http://t.csdnimg.cn/4bvCJ当然，也欢迎对全栈项目感兴趣的朋友查看我的其他专栏。
后话
在全栈领域，博主也只不过是一个普通的萌新而已。本系列的博客主要是记录一下自己学习的一些经历，然后把自己领悟到的一些东西总结一下，分享给大家。
文章全篇的操作过程都是笔者亲自操作完成的，一些定义性的文字加入了笔者自己的很多理解在里面，所以仅供参考。如果有说的不对的地方，还请谅解。
==期待与你在下一期博客中再次相遇==
——疑似有点缺氧的【H2O2】
标签：H2O2,元素,如下,全栈,设置,font,选择器,CSS,属性 From： https://blog.csdn.net/ZC13786305863/article/details/142134013