CSS 第二天学习笔记：复合选择器、特性、背景与显示模式

在前端学习中CSS 是不可或缺的一部分。今天我们来总结 CSS 第二天的核心内容包括复合选择器、CSS 特性、背景属性、显示模式等知识点帮助大家更好地掌握 CSS 的使用技巧。一、复合选择器复合选择器由两个或多个基础选择器组合而成目的是更精确、更高效地选中目标元素。1. 后代选择器选中某元素的后代元素使用空格分隔cssdiv span { color: green; }2. 子代选择器选中某元素的直接子元素使用分隔cssdiv span { color: red; }3. 并集选择器选中多个标签设置相同样式使用逗号分隔cssh1, h2, p { font-size: 16px; }4. 交集选择器同时满足多个条件的元素选择器连写cssp.box { color: red; }注意标签选择器必须写在最前面。5. 伪类选择器选中元素的某个状态例如鼠标悬停cssa:hover { color: red; }超链接的四种状态顺序:link→:visited→:hover→:activeLVHA二、CSS 三大特性1. 继承性子级默认继承父级的文字控制属性如颜色、字体大小。注意a 标签的颜色、标题字体大小等不会被继承。2. 层叠性相同属性后面的会覆盖前面的不同属性会叠加生效3. 优先级优先级公式通配符 标签 类 id 行内样式 !important复合选择器会进行权重叠加计算规则如下从左到右依次比较行内样式、id、类、标签权重高的生效!important最高继承权重最低三、Emmet 写法Emmet 是 VS Code 中的代码简写方式极大提高开发效率。HTML 示例div.box→div classbox/divdiv#box→div idbox/divdivp→div/divp/pCSS 示例w500→width: 500px;bgc→background-color: ;w200h100bgc→ 多个属性组合四、背景属性属性描述background-color背景色background-image背景图background-repeat平铺方式background-position位置background-size缩放background-attachment固定background复合属性示例cssdiv { background: pink url(./images/1.png) no-repeat right center/cover; }提示背景图默认会平铺需用no-repeat取消。五、显示模式模式特点块级元素独占一行宽高生效默认宽度 100%行内元素一行多个宽高不生效由内容撑开行内块元素一行多个宽高生效内容撑开转换显示模式cssdisplay: block; /* 块级 */ display: inline; /* 行内 */ display: inline-block; /* 行内块 */六、综合案例热词展示通过组合使用背景、伪类、显示模式等属性可以制作出类似“热词”标签的布局效果提升页面视觉层次感。总结今天我们学习了复合选择器的多种写法与使用场景CSS 的继承、层叠、优先级规则Emmet 快捷键提升开发效率背景图的各种控制方式显示模式的分类与转换掌握这些内容将为后续的复杂页面布局打下坚实基础。继续加油