2024年最新CSS基础知识（复合选择器、标签模式、背景）_css规则复合内容(2)，阿里巴巴java开发面试

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上鸿蒙开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化的资料的朋友，可以戳这里获取

• 背景附着
• 背景简写
• 背景透明

• CSS注释

复合选择器

后代选择器

概念
后代选择器又称为包含选择器

语法

.class h3{color:red;font-size:16px;}

作用
用来选择元素或元素组的子孙后代
把外层标签写在前面，内层标签写在后面，中间用空格分隔

子元素选择器

语法

.class>h3{color:red;font-size:14px;}

作用
子元素选择器只能选择作为某元素子元素(亲儿子)的元素
把父级标签写在前面子级标签写在后面中间跟一个>连接

交集选择器

条件
由两个选择器构成，找到的标签必须满足：既有标签一的特点也有标签二的特点

语法

第一个为标签选择器第二个为class选择器，二者间不能有空格

并集选择器

并集选择器是各个选择器通过 , 连接而成的，通常用于集体声明

应用
某些选择器定义的相同样式可利用并集选择器，让代码更简洁

语法

并集选择器用逗号隔开的，所有选择器都会执行后面样式

伪类选择器

作用
用于向某些选择器添加特殊的效果。如给链接添加特殊效果

链接伪类
a:link /* 未访问的链接 /
a:visited / 已访问的链接 /
a:hover / 鼠标移动到链接上 /
a:active / 选定的链接 */

行高

基线和基线的距离为行高

单行文本垂直居中

文字的行高等于盒子的高度，行高 = 上距离 + 内容高度 + 下距离

行高和高度的三种关系

如果行高等于高度文字会垂直居中
如果行高大于高度文字会偏下
如果行高小于高度文字会偏上

标签显示模式

什么是标签显示模式

标签以什么方式进行显示，比如div自己占一行， span一行多个

作用
网页标签非常多不同地方用不同类型的标签以便更好的完成网页

分类

块级元素

特点
一行只能放一个块
高度，宽度、外边距以及内边距都可以控制
宽度默认是容器（父级宽度）的100%
是一个容器及盒子，里面可以放行内或者块级元素

行内元素

特点
相邻行内元素在一行上，一行可以显示多个
高、宽直接设置是无效的
默认宽度就是它本身内容的宽度
行内元素只能容纳文本或则其他行内元素
注意
链接里面不能再放链接
特殊情况a里面可以放块级元素

行内块级元素

特点
和相邻行内元素在一行上,但是之间有空白缝隙，一行可显示多个
默认宽度就是它本身内容的宽度
高度，行高、外边距以及内边距都可以控制

标签显示模式转换

块转行内：display:inline;
行内转块：display:block;
块、行内元素转换为行内块： display: inline-block;

CSS特性

层叠性

概念
层叠性是指多种CSS样式的叠加

原则
样式冲突，遵循的原则是就近原则
样式不冲突，不会层叠

继承性

概念
子标签会继承父标签的某些样式，如文本颜色和字号

优先级

概念
定义CSS样式时，经常出现两个或更多规则应用在同一元素上，此时
选择器相同，则执行层叠性
选择器不同，就会出现优先级的问题

权重计算公式
关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity

权重叠加
交集选择器后代选择器是有多个基础选择器组合而成，会出现权重叠加

继承的权重是0
修改样式要看该标签是否被选中
如果选中以上面公式计权重
如果没有选中，那么权重是0

CSS背景

背景颜色

语法

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

098)]

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！