技术观察｜从问答优化到任务执行，Agent 时代 GEO 的演进路径
2026/9/6 2:10:22
一、引言
上一期和大家说了HTTP的基础那么这一期就给大家带来CSS的基础，不过因为本文还是优先考虑后端的所以会主要讲解CSS选择器，下一期会和大家说JS了，还会带大家写一个前端的猜数字游戏和留言板，那么话不多说就进入今天的内容吧。
二、CSS基本介绍
上一期也有简单和大家说过CSS是对我们的页面进行化妆一样的效果也就是美化专业一点来说就是能够对⽹⻚中元素位置的排版进⾏像素级精确控制, 实现美化⻚⾯的效果. 能够做到⻚⾯的样式和结构分离。基本语法就是
<style> 选择器+{N条声明} <style>写在<style>里面的选择器决定了对谁进行修改，声明决定干什么，声明的属性是键值对，使用；区分键值对，使用：区分键和值。
CSS有三种引入方式分别是行内样式，内部样式，以及外部样式，简单用代码演示一下。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>行内样式</title> </head> <body> <div style="width:200px;height:100px; background-color:skyblue; color:white;text-align:center;line-height:100px;"> 行内样式 </div> </body> </html>这第一种就是行内样式就是直接在HTML标签里面写，可以看到我们在div标签里面写了style这种情况就是单纯选择了这一个标签进行修饰对他进行了宽度颜色之类的调整。
第二种内部样式
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>内部样式</title> <style> .box{ width: 200px; height: 100px; background-color: orange; color: #fff; text-align: center; line-height: 100px; } </style> </head> <body> <div class="box">内部样式表</div> </body> </html>也是在HTML里面写但是是单独定义的</style>而不是在别的标签里面写。
第三种外部样式
新建 style.css 文件
.box-out{ width: 200px; height: 100px; background-color: #222; color: #fff; text-align: center; line-height: 100px; }<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>外部样式</title> <!--引入外部css文件--> <link rel="stylesheet" href="style.css"> </head> <body> <div class="box-out">外部样式表</div> </body> </html>分为两个文件：html 文件+独立 css 文件，html 文件，使用 link 标签引入。
CSS 一共有三种引入方式，行内样式写在标签的 style 属性中，优先级最高，使用便捷但样式和结构混杂，无法复用，适合临时调试；内部样式通过 head 中的 style 标签编写，支持完整 CSS 语法，仅对当前页面生效，适合单页面案例；外部样式使用 link 标签引入独立的 css 文件，实现样式与结构完全分离，样式可多页面复用，浏览器能够缓存文件，便于后期维护，是实际开发中的首选方式，而 @import 加载性能较差一般不推荐使用，在优先级上，行内样式高于内部与外部样式，内部和外部样式的覆盖效果由书写先后顺序决定。
三、CSS选择器（重点）
CSS选择器主要有标签选择器和class选择器，id选择器，复合选择器，通配符选择器。
3.1 标签选择器
所谓的标签选择器就是选择所有同一个标签进行修饰，直接写标签名，作用于该标签全部元素，特点是批量修改同一种标签；缺点是不能单独控制某一个元素，精准度不够。
div { width:100px; height:100px; }3.2 class选择器
写法是英文点.+ 类名，例如.box{}；标签上通过class="box"使用。一个类可以给多个标签复用，一个标签也可以写多个 class，开发使用最多。 特点是灵活复用，可控性强；id > class > 标签选择器。
.red { color: red; }<div class="red">文字变红</div>3.3 id选择器
写法：井号#+ id 名，例如#demo{}；标签通过id="demo"使用。 规范要求：同一个页面 id 只能定义一次，不能重复。 特点是优先级高于 class；一般不用于大量设置样式，更多配合 JS 获取元素使用。
#demo { background: orange; }<div id="demo">id唯一</div>3.4 复合选择器
由两个或多个基础选择器组合而成，可以更加精准定位元素，分为后代、子代、并集等常用类型。
后代选择器div p：选中 div 内部所有 p 标签（子孙后代全部生效）
子代选择器.box>p：只选中直接子元素，不包含深层嵌套标签
并集选择器div,p,.box：多个选择器共用同一套样式，逗号隔开
特点是精准筛选目标元素，缩小选择范围，减少多余 class 命名。
.box span { color:blue; }上面的代码就是在class为box的标签下的span标签进行修饰。
3.5 通配符标签
写法：* {}，星号代表页面中所有标签元素。 作用范围是整个网页全部标签，一般用来统一清除浏览器自带的默认内外边距。 特点是匹配范围最大，优先级最低；实际开发通常只做页面初始化重置样式。
* { margin: 0; padding: 0; }四、常用的CSS
常用的CSS有color（颜色），font-size（字体大小），border（边框），width/height（）宽度与高度，padding（内边距），margin（外边距）。下面是代码的综合演示
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>CSS常用样式属性演示</title> <style> /* color：设置文字颜色 */ .color-demo{ color: red; } /* font-size：设置字体大小，单位px */ .font-demo{ font-size: 24px; } /* width 宽度，height 高度，控制盒子尺寸 */ .size-demo{ width: 200px; height: 100px; background-color: #ccc; } /* border：边框 格式：边框粗细 样式 颜色 */ .border-demo{ width: 150px; height: 80px; border: 2px solid blue; } /* padding：内边距，盒子内容和边框之间的距离 */ .padding-demo{ width: 150px; height: 80px; border:1px solid #000; padding: 20px; } /* margin：外边距，盒子和其他盒子之间的距离 */ .margin-demo{ width: 150px; height: 80px; border:1px solid #000; margin: 30px; } </style> </head> <body> <p class="color-demo">color 文字颜色</p> <p class="font-demo">font-size 字体大小24px</p> <div class="size-demo">width宽度 height高度</div> <div class="border-demo">border边框</div> <div class="padding-demo">padding内边距</div> <div class="margin-demo">margin外边距</div> </body> </html>然后是效果
五、综合案例
这里就是用了上面所有内容的综合代码美观可能一般般以演示为主，下一期的猜数字和留言板会尽量给大家搞好看点。先是代码
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>CSS选择器 + 常用属性综合案例</title> <style> /* 1.通配符选择器：清除所有标签默认内外边距 */ * { margin: 0; padding: 0; } /* 2.标签选择器：统一设置div基础样式 */ div { margin: 15px; } /* 3.class类选择器：复用样式 */ .box { width: 300px; /* 宽度 */ height: 120px; /* 高度 */ border: 2px solid #333;/* 边框：粗细 实线 颜色 */ padding: 20px; /* 内边距：内容距离边框 */ color: #fff; /* 文字颜色 */ font-size: 18px; /* 字体大小 */ } .bg-blue { background-color: #409eff; } /* 4.id选择器：唯一元素单独设置 */ #special { background-color: #e6a23c; } /* 5.复合-后代选择器：选中.box里面的span标签 */ .box span { color: red; font-size: 22px; font-weight: bold; } /* 复合-并集选择器：多个元素共用一套样式 */ p, .tip { margin: 10px 15px; font-size: 16px; color: #666; } </style> </head> <body> <p>综合演示：通配符、标签、class、id、复合选择器 + width/height/border/padding/margin/color/font‑size</p> <!-- 使用class类选择器 --> <div class="box bg-blue"> 类选择器盒子 <span>后代span变红变大</span> </div> <!-- 使用id选择器 + class --> <div id="special" class="box"> id唯一的盒子 <span>同样匹配后代选择器</span> </div> <div class="tip">margin控制盒子与盒子之间的距离，padding撑开盒子内部空间</div> </body> </html>效果如图
六、总结
这期我们主攻后端向极简 CSS 基础，重点吃透核心考点、舍弃前端花哨样式，为后续 JS 实战、留言板、猜数字游戏做铺垫。
首先简单复盘了 CSS 的核心作用，就是给网页做样式美化，实现页面结构与样式分离，能精准控制页面元素排版样式。同时掌握了三种 CSS 引入方式：行内样式优先级最高，适合临时调试、无法复用；内部样式仅当前页面生效，适合简单案例；外部样式将样式独立为 css 文件，可多页面复用、支持浏览器缓存，是企业开发首选。
本期重中之重是各类 CSS 选择器，也是后端开发必须掌握的核心：标签选择器批量统一同类标签样式，精准度低；class 类选择器灵活可复用、支持多类叠加，是开发最常用的选择器；id 选择器全局唯一、优先级更高，多用于 JS 绑定元素，极少单独设样式；复合选择器包含后代、子代、并集类型，能精准筛选目标元素，精简代码；通配符选择器优先级最低，主要用于初始化页面、清除浏览器默认边距。优先级排序：行内样式＞id 选择器＞class 选择器＞标签选择器＞通配符选择器。
最后学习了高频常用 CSS 属性，涵盖文字颜色、字体大小、元素宽高、边框、内外边距等基础样式，结合所有知识点完成了综合案例，熟练掌握选择器搭配基础样式的使用逻辑。
下一期将开启 JS 基础学习，同时上手前端猜数字游戏、留言板实战项目，循序渐进完成前端基础闭环。