很多零基础学前端的朋友第一次打开CSS教程时都会被类选择器、ID选择器、后代选择器、伪类、权重这些概念砸得眼花。尤其是准备Web应用开发类竞赛的人总觉得CSS没有JavaScript重要结果一上机才发现选择器写错、样式被覆盖、边框三角形画不出来白白丢分。其实CSS零基础入门没有想象中那么难它知识点有限、套路清晰完全可以靠几个有代表性的题目快速打通。这次要聊的是某在线题库里一组很适合新手的CSS题号FED12、FED13、FED74、FED75、FED76。这五道题基本覆盖了CSS入门的两条主线——选择器和样式设置另外还藏着一个很经典的CSS边框三角形原理。无论你是零基础准备转前端还是正在备赛阶段做突击把这几道题背后的知识点弄清楚比盲目刷几十道重复题有价值得多。1. 先看清CSS基础在备赛里的位置1.1 为什么CSS是低门槛高回报的部分前端要学的知识看着很多但对一个完全没有基础的人来说HTML和CSS的入门曲线其实非常平缓。JavaScript像一道需要慢慢炖的硬菜掌握变量、作用域、异步这些概念需要反复练习CSS更像一盘凉拌菜材料简单但刀工和摆盘决定最终效果你只需要理解给谁加什么样式就能很快做出看得见的东西。在Web应用开发类的竞赛里前端题通常由三部分组成HTML结构搭建、CSS样式还原、JavaScript交互逻辑。很多备赛新手把大把时间花在啃JavaScript框架上反而忽略了CSS。但真实比赛时CSS样式上的失分往往是最可惜的——它不是不会写而是觉得自己写对了实际上样式没生效。这类问题出现得最频繁的环节就是选择器和盒模型。把这些地基打牢比赛时省下的调试时间比想象中多得多。1.2 五个题号分别扣在哪个知识点上FED12、FED13、FED74、FED75、FED76这组题号第一眼看上去像随机编号实际是顺着CSS学习路径设计的。我用一张表把它们的知识映射整理出来题号主题方向核心考点FED12选择器基础类选择器、ID选择器的基本用法FED13选择器进阶组合选择器、优先级比较FED74样式设置文本属性、盒模型属性应用FED75样式设置样式覆盖、继承关系FED76边框三角形宽高为0时边框的几何表现不同题库的题干细节会有出入但核心考点是稳定的。刷题时不要只盯着这题我过了而是每做完一题反推它到底考的是哪条规则。比如FED12过了你不光要会写.class和#id最好还能说出类选择器可以重复使用、ID选择器在页面中应该唯一这两条设计原则。这样正式比赛时题目换个马甲你也能认出来。2. 选择器FED12、FED13背后的两条主线2.1 选择器是找元素样式是打扮元素选择器的作用通俗说就是从HTML里找人。CSS后面的样式规则只会作用在它找到的那些元素身上。理解这一点后很多新手常犯的样式不生效问题就解决了一半——不是样式写错了而是压根没找对人。假设有这样一个页面片段div classcard p idtitle标题文字/p p classdesc描述文字/p /div对应的CSS可以这样写.card { border: 1px solid #ccc; padding: 16px; } #title { font-size: 20px; color: #333; } .desc { font-size: 14px; color: #666; }.开头的.card、.desc是类选择器适合给一类元素复用样式#开头的#title是ID选择器因为ID在页面里只能出现一次所以通常用来标记唯一的元素。FED12这种入门题往往就是给你一段HTML让你用指定的类或ID把文字颜色、字号改掉。这类题只要细心基本不会出错。2.2 优先级FED13真正想考的东西FED13通常不会只考单层选择器而是会把选择器写长让你在一个元素同时被多个规则命中的情况下判断最终效果。这时考验的就是CSS优先级。CSS优先级的计算可以用一个四位数来记(内联样式, ID选择器, 类/伪类/属性选择器, 标签/伪元素选择器)。从左往右哪一个数字先更大谁的优先级就更高。看两个例子/* 权重 (0,1,1,0) */ #main .text { color: red; } /* 权重 (0,0,2,0) */ .page .text { color: blue; }在idmain的容器里如果有一个classtext的元素同时被上面两条规则命中最终文字会是红色。因为第二条虽然有两个类但第一位都是0接下来要比ID数1大于0所以红色规则获胜。很多FED13的干扰选项就藏在这种看起来形式更复杂的样式反而会输的地方。2.3 做题时的判断顺序把这套逻辑总结成做题顺序可以省掉很多纠结第一步看选择器是否命中目标元素。第二步按(ID数, 类数, 标签数)算权重不考虑顺序。第三步权重相同的情况下后写的样式覆盖先写的样式。第四步!important的优先级在正常情况下最高但要谨慎使用。额外补充一个容易忽略的点!important虽然能让单条规则强制生效但它绕过了层叠规则一旦用多代码会变得很难维护。竞赛题里偶尔会故意设置一个!important作为考点但实际项目里能用权重解决的问题就不要动用它。这一点我在后面还会提到。3. 样式设置FED74、FED75练的是把规则翻译成视觉3.1 一条CSS规则的基本骨架如果把选择器比作找到目标那样式设置就是把设计稿翻译成浏览器能理解的语言。一条基础的CSS规则长这样选择器 { 属性1: 值1; 属性2: 值2; }入门阶段最常见的属性大概分成几组文本相关color、font-size、font-family、line-height、text-align、text-decoration盒模型相关width、height、padding、border、margin、box-sizing背景相关background-color、background-image、background-size布局相关display、position、flex备赛时最怕的是把时间花在很少考的布局属性上结果基础文本属性反而没记牢。FED74这类题通常就是给你一个已经写好的HTML让你补充满足要求的文字样式。做题时建议先读题干要求圈出颜色字号对齐方式这些关键词再对应写下属性不要凭感觉一次写一整段那样容易漏。3.2 盒模型样式设置最容易出错的模型盒模型是CSS样式设置的根基几乎所有视觉问题最终都能归结到它。要理解盒模型可以把它想象成一个快递箱--------------------------- | margin 外边距 | | --------------------- | | | border 边框 | | | | --------------- | | | | | padding 内边距 | | | | | | content 内容 | | | | | | | | | | | --------------- | | | --------------------- | ---------------------------内容区content放实际内容内边距padding是内容到边框的距离边框border本身就是一层可见或不可见的边界外边距margin是盒子与其他元素之间的间隔。新手最容易踩的坑是设置了一个width: 200px又加了padding: 20px和border: 1px solid #000结果整个盒子实际占用的宽度变成了200 20*2 1*2 242px把布局撑爆。解决办法是统一使用box-sizing: border-box* { box-sizing: border-box; }这样设置之后width就表示最终盒子的总宽度padding和border都会被算进去布局会好控制得多。FED74、FED75里经常出现的元素总宽高是多少这类计算题都跟这个模型有关。3.3 继承与覆盖FED75的隐藏考点FED75这类题目往往不是考会不会写属性而是考写在哪一层才有效。CSS有一条继承机制部分文本属性如color、font-family、line-height可以从父元素传给子元素而大部分盒模型属性如margin、padding、border不继承。做这类题时可以用一个简单办法先判断性质如果一条规则写在父元素上你会希望所有子元素文字统一变红、变粗这个需求通常用继承就能做到如果想让子元素的内边距变化就必须直接写在子元素上。当一个元素同时受到继承来的样式和直接写在它身上的样式影响时直接写的那条会赢因为继承算的是最低优先级。开发者工具里有一个非常实用的面板选中一个元素后看Styles区域浏览器会列出所有命中该元素的规则并且显示哪些属性被划掉了、最终由哪条规则生效。备赛刷题时多打开这个面板看一眼比死记硬背优先级数字有效得多。4. CSS边框三角形原理从FED76到各种变形4.1 为什么border能切出三角形FED76这道题第一次看到时很多人会愣住CSS里没有直接画三角形的属性怎么用CSS画一个三角形答案藏在盒模型里当一个元素的宽和高都是0时它的四个边框会向内收缩在四个角上两两相遇最终每一根边框都会变成一个等腰直角三角形。先做一个实验。把一个元素的宽高设为0四周都设20px的边框并且每边颜色不同.triangle-demo { width: 0; height: 0; border: 20px solid; border-color: red green blue orange; }浏览器里会显示四个不同颜色的三角形拼成一个正方形top边框形成朝下的红色三角形right边框形成朝左的绿色三角形bottom边框形成朝上的蓝色三角形left边框形成朝右的橙色三角形。这正是边框三角形原理的核心每一根边框的实际形状都取决于它两侧相邻边框的挤压。4.2 只保留一个方向的三角形明白了原理后想要显示哪一个方向的三角形就让它对面方向的边框拥有颜色其余边框设为透明。CSS专门提供了transparent这个关键词来表示透明颜色比用rgba(0,0,0,0)更直观。要做一个朝上的三角形使用的是border-bottom.triangle-up { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 20px solid #333; }这里有个容易绕晕的点朝上的三角形尖端在上面而它的底边是bottom边框。所以如果题目让你做一个向上箭头你真正要设置的是底部边框颜色。各个方向的对应关系整理如下三角形尖端方向需要设置颜色的边框需要透明的边框向上border-bottomborder-left / border-right向下border-topborder-left / border-right向左border-rightborder-top / border-bottom向右border-leftborder-top / border-bottom4.3 尺寸怎么控高和宽不是同一个边框决定的很多人在这一步卡住因为它们会以为三角形的宽度由某一根边框的宽度决定。实际上三角形的宽度由左右两根透明边框的宽度之和决定而高度由有颜色那根边框的宽度决定。看一个实际需求做一个底部宽80px、高40px的三角形。宽度80px说明左右两边各占40px高度40px说明底部边框宽度为40px.triangle-banner { width: 0; height: 0; border-left: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 40px solid #ff6b35; }如果想要一个直角三角形只需把其中一根透明边框去掉或设为0。比如一个经典的直角在右下的三角形.triangle-corner { width: 0; height: 0; border-bottom: 40px solid #09c; border-left: 20px solid transparent; }这种写法在实现价格标签、消息气泡箭头时非常常见也是FED76这一类题目的进阶方向。4.4 边框三角形在备赛题里的实际应用竞赛里很少让你单独画一个三角形更多是要求在一个界面布局中用它做装饰。最常见的两个场景第一个是下拉菜单箭头。一个朝下的三角配合:hover状态旋转就能做出箭头翻转效果.arrow { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid #666; transition: transform 0.2s; } .menu:hover .arrow { transform: rotate(180deg); }第二个是消息气泡的角。气泡主体是一个有边框的圆角矩形角标用一个绝对定位的伪元素画出来并让它跟气泡背景同色.bubble { position: relative; background: #fff; border: 1px solid #ddd; padding: 12px; } .bubble::before { content: ; position: absolute; top: -10px; left: 24px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #fff; }这里有个细节如果气泡本身有边框直接用同色三角形覆盖会盖住边框线右上角会露出一个缺口。备赛时如果遇到这种带边框的气泡需求可以在三角形内部再叠一层稍小一点的同色三角形或者直接用filter阴影的技巧处理。我建议比赛时优先用纯色无边框的气泡这样实现最简单也最不容易被判错。5. 备赛和自学中最值得记住的几件事5.1 样式没生效最常见的三个原因备赛刷题时百分之八十的CSS问题都可以归结为三件事。第一选择器没有命中任何元素可能是类名拼写错误、字母大小写不一致或者是选择器里写了多余的空格。第二命中了元素但权重不够别的规则抢占了优先权这在上一章已经详细说过。第三属性值被后续同名简写属性覆盖比如先写border: 1px solid #000后面又写border-color: red这时候简写属性会把边框宽度、样式重新设回默认值造成看起来明明改了颜色实际边框却不见了的效果。我的排查习惯是按顺序来先在开发者工具里检查元素本身有没有被选中再看Styles面板里有没有被划掉的属性最后看一下规则来源是否来自某个意料之外的样式表。只要走完这三步绝大多数样式问题都能定位。5.2 给零基础备赛者的三周节奏如果离比赛还有三周不建议一上来就啃整本CSS书按我实测有效的方式可以这样安排阶段时间重点内容建议配合的题号第一周3天选择器、常用文本属性FED12、FED13第二周4天盒模型、边框三角形、伪元素FED74、FED75、FED76第三周7天模拟题限时训练、复盘错题整套模拟卷第一周核心是写得出、选得对要能准确判断一条规则作用在哪个元素上。第二周重点在算得准、画得出盒模型的计算和三角形变形要多写几遍做到不查资料也能手写出来。第三周就不要再看基础讲解了直接用限时训练模拟实战每做完一题把错因记录成一句话考前集中翻一遍。5.3 做题时最容易丢的细节分最后想提醒几个细节。第一属性名和值之间要有空格不需要color:red和color: red都合法真正会丢分的位置是分号漏写或中英文符号混用。第二颜色值尽量使用十六进制或rgba形式少用red、blue这类英文单词因为判断视觉效果时不够精准。第三做页面还原题时字体和行高往往不是默认值题干如果给了font-family和line-height一定要原样写上很多样式还原差异就出在这里。对于FED76这类涉及边框三角形的题目我的建议是不要只看懂原理就停而是把四个方向、三种尺寸各写一遍再用伪元素画一个小号箭头。等你闭着眼也能写出朝下、朝左的三角形代码这一类考题基本就是稳拿分了。备赛期间这种小而有确定性的知识点最值得优先拿下它们能带来的分数回报非常稳定。
