企业官网建设流程全解析

手机网站首页新闻模板,wordpress自适应插件,网站未备案 打不开,重庆网站建设seo公司哪家好小白前端别慌#xff1a;3天搞懂CSS复合选择器和伪类#xff08;附避坑指南#xff09;小白前端别慌#xff1a;3天搞懂CSS复合选择器和伪类#xff08;附避坑指南#xff09;写在前面#xff1a;我当年也被CSS按在地上摩擦复合选择器#xff1a;其实就是“拼爹”游戏1…小白前端别慌3天搞懂CSS复合选择器和伪类附避坑指南小白前端别慌3天搞懂CSS复合选择器和伪类附避坑指南写在前面我当年也被CSS按在地上摩擦复合选择器其实就是“拼爹”游戏1. 后代选择器祖孙三代一把梭2. 子选择器只认亲儿子3. 相邻兄弟就认“隔壁老王”4. 通用兄弟所有“弟弟”都挨打伪类给元素加“人格”1. 链接四兄弟LVHA 顺口诀2. 结构性伪类nth 家族大乱斗3. 状态伪类表单自动校验4. 逻辑伪类not、is、where 三剑客实战导航栏右侧竖线一行搞定纯 CSS Tab 切换target 伪类玩出花调试口诀三步走不背锅兼容性速查表2026 版放心抄彩蛋我用这些选择器省下的时间都拿去撸猫了收尾别再写“div1”“red”“big”这种类名了小白前端别慌3天搞懂CSS复合选择器和伪类附避坑指南写在前面我当年也被CSS按在地上摩擦先坦白我第一份前端实习的第三天就被 Leader 指着屏幕吼“你这一坨选择器是写给鬼看的”当时我还嘴硬“这不是能跑嘛……”结果他老人家一句“能跑那 IE 怎么渲染出一坨彩虹”直接把我秒成渣。所以别自卑谁还不是从div { color: red; }过来的。今天这篇就当我在群里给你发 59 秒语音——口水乱飞但保证你听完就能抄家伙上项目。复合选择器其实就是“拼爹”游戏1. 后代选择器祖孙三代一把梭/* 语法祖先 后代 */.article p{color:#333;}坑点你以为只影响.article儿子错孙子、曾孙子全被拽进来。排查DevTools 里点一下元素看右侧 Styles 面板如果看到一堆继承样式说明选过头了。2. 子选择器只认亲儿子/* 语法父 子 */.nav li{border-bottom:1px solid #eee;}实战做垂直菜单时只想给一级li加底边用别让二级li蹭热度。兼容性IE6 直接装死老项目慎剁。3. 相邻兄弟就认“隔壁老王”/* 语法A B */h2 p{margin-top:0;/* 去掉标题和第一段之间的缝隙 */}注意必须是“紧挨着”中间插个div就翻脸不认人。4. 通用兄弟所有“弟弟”都挨打/* 语法A ~ B */input[typecheckbox]:checked ~ .mask{display:block;/* 勾选协议才显示遮罩 */}骚操作纯 CSS 实现“点击显示密码”开关完全不用 JS。伪类给元素加“人格”1. 链接四兄弟LVHA 顺口诀a:link{color:royalblue;}a:visited{color:gray;}a:hover{color:hotpink;}a:active{color:orange;}顺序错hover放visited前面点击后颜色就回不来别问我怎么知道的。2. 结构性伪类nth 家族大乱斗/* 全家排行 */li:nth-child(2n1){background:#f9f9f9;/* 奇数行 */}/* 只看同名兄弟 */p:nth-of-type(3){color:crimson;/* 第三个p标签 */}口诀nth-child是“户口本”按出生顺序数。nth-of-type是“班级花名册”只点同名同学。现场翻车/* 想隔行变色结果全白 */tr:nth-child(2n){background:#fafafa;}原因table里偷偷塞了tbodytr全变tbody的儿子索引直接乱套。修复tbody tr:nth-child(2n){...}3. 状态伪类表单自动校验input:invalid{border-color:red;animation:shake 0.3s;}input:valid{border-color:green;}一行代码省 100 行 JS提交按钮禁用直到表单合法button:disabled{opacity:0.5;cursor:not-allowed;}/* 只要给按钮加 disabled 属性即可完全不用 JS 算状态 */4. 逻辑伪类not、is、where 三剑客/* 排除法 */button:not(.special){box-shadow:0 2px 4pxrgba(0,0,0,.15);}/* 合并选择器优先级取最高 */:is(h1,h2,h3) span{color:#555;}/* 合并选择器优先级永远为 0方便被覆盖 */:where(.btn,.link):hover{filter:brightness(1.1);}性能:is()和:where()浏览器内部做短路优化比重复写三组选择器快。实战导航栏右侧竖线一行搞定navulclassnavli首页/lili产品/lili价格/lili关于/li/ul/nav.nav{display:flex;gap:0 20px;}/* 除了第一个li其他前面加竖线 */.nav li li::before{content:;position:absolute;left:-10px;top:50%;transform:translateY(-50%);height:60%;width:1px;background:#ccc;}解释li li只从第二个li开始算。::before绝对定位不占用流空间不会把文字挤歪。纯 CSS Tab 切换target 伪类玩出花divclasstabs面板1 面板2dividpanel1classpanel内容1/divdividpanel2classpanel内容2/div/div.panel{display:none;}.panel:target{display:block;}原理点击链接改变 URL hash:target匹配对应 ID 元素。缺点URL 会变刷新后状态保留SEO 无感适合后台系统。调试口诀三步走不背锅选错人DevTools → Elements → 点击元素 → 看 Styles 面板有没有你的选择器。没看到说明匹配失败回去检查拼写、空格、层级。优先级被吊打控制台输入window.getComputedStyle(document.querySelector(.btn)).backgroundColor看看最终到底谁赢。specificity 计算器在线一搜一大把别手算。伪类没触发:hover在触屏上可能永不生效记得补:focus样式。:nth-child算错DevTools 右键元素 → Copy → Copy selector让浏览器帮你生成。兼容性速查表2026 版放心抄伪类/选择器ChromeFirefoxSafariEdgeIE~213.1127:nth-child23.53.1129:nth-of-type23.53.1129:not()23.53.1129:is():where()88781488❌结论IE 已死有事烧纸。新项目直接:is、:where走起老项目加 PostCSS 插件自动降级。彩蛋我用这些选择器省下的时间都拿去撸猫了:empty自动隐藏空状态.alert:empty{display:none;}后端返回空文案也不炸版。:focus-visible只给键盘用户画焦点button:focus-visible{outline:2px solid dodgerblue;}鼠标点下去不画圈颜值党狂喜。:indeterminate让全选框处于“半选”状态input:indeterminate label{opacity:0.6;}纯 CSS 实现“部分选中”样式配合 JS 三行代码搞定。收尾别再写“div1”“red”“big”这种类名了复合选择器和伪类就是让你少写 class、少起名字、少掉头发。记住能靠层级搞定的就别加 class能靠状态伪类搞定的就别上 JS。三天时间把这篇丢进项目里练两轮你会发现——“卧槽原来 CSS 也会读心术我少写几百行Leader 还夸我代码干净”下次再遇到 CSS 坑别急着拍桌子先在群里吼一嗓子保准有人甩你一段更骚的写法。前端路漫漫一起少掉点头发多撸点猫完事儿。欢迎来到我的博客很高兴能够在这里和您见面希望您在这里可以感受到一份轻松愉快的氛围不仅可以获得有趣的内容和知识也可以畅所欲言、分享您的想法和见解。推荐DTcode7的博客首页。一个做过前端开发的产品经理经历过睿智产品的折磨导致脱发之后励志要翻身农奴把歌唱一边打入敌人内部一边持续提升自己为我们广大开发同胞谋福祉坚决抵制睿智产品折磨我们码农兄弟专栏系列点击解锁学习路线(点击解锁知识定位《微信小程序相关博客》持续更新中~结合微信官方原生框架、uniapp等小程序框架记录请求、封装、tabbar、UI组件的学习记录和使用技巧等《AIGC相关博客》持续更新中~AIGC、AI生产力工具的介绍例如stable diffusion这种的AI绘画工具安装、使用、技巧等总结《HTML网站开发相关》《前端基础入门三大核心之html相关博客》前端基础入门三大核心之html板块的内容入坑前端或者辅助学习的必看知识《前端基础入门三大核心之JS相关博客》前端JS是JavaScript语言在网页开发中的应用负责实现交互效果和动态内容。它与HTML和CSS并称前端三剑客共同构建用户界面。通过操作DOM元素、响应事件、发起网络请求等JS使页面能够响应用户行为实现数据动态展示和页面流畅跳转是现代Web开发的核心《前端基础入门三大核心之CSS相关博客》介绍前端开发中遇到的CSS疑问和各种奇妙的CSS语法同时收集精美的CSS效果代码用来丰富你的web网页《canvas绘图相关博客》Canvas是HTML5中用于绘制图形的元素通过JavaScript及其提供的绘图API开发者可以在网页上绘制出各种复杂的图形、动画和图像效果。Canvas提供了高度的灵活性和控制力使得前端绘图技术更加丰富和多样化《Vue实战相关博客》持续更新中~详细总结了常用UI库elementUI的使用技巧以及Vue的学习之旅《python相关博客》持续更新中~Python简洁易学的编程语言强大到足以应对各种应用场景是编程新手的理想选择也是专业人士的得力工具《sql数据库相关博客》持续更新中~SQL数据库高效管理数据的利器学会SQL轻松驾驭结构化数据解锁数据分析与挖掘的无限可能《算法系列相关博客》持续更新中~算法与数据结构学习总结通过JS来编写处理复杂有趣的算法问题提升你的技术思维《IT信息技术相关博客》持续更新中~作为信息化人员所需要掌握的底层技术涉及软件开发、网络建设、系统维护等领域的知识《信息化人员基础技能知识相关博客》无论你是开发、产品、实施、经理只要是从事信息化相关行业的人员都应该掌握这些信息化的基础知识可以不精通但是一定要了解避免日常工作中贻笑大方《信息化技能面试宝典相关博客》涉及信息化相关工作基础知识和面试技巧提升自我能力与面试通过率扩展知识面《前端开发习惯与小技巧相关博客》持续更新中~罗列常用的开发工具使用技巧,如 Vscode快捷键操作、Git、CMD、游览器控制台等《photoshop相关博客》持续更新中~基础的PS学习记录含括PPI与DPI、物理像素dp、逻辑像素dip、矢量图和位图以及帧动画等的学习总结日常开发办公生产【实用工具】分享相关博客》持续更新中~分享介绍各种开发中、工作中、个人生产以及学习上的工具丰富阅历给大家提供处理事情的更多角度学习了解更多的便利工具如Fiddler抓包、办公快捷键、虚拟机VMware等工具吾辈才疏学浅摹写之作恐有瑕疵。望诸君海涵赐教。望轻喷嘤嘤嘤非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。愿斯文对汝有所裨益纵其简陋未及渊博亦足以略尽绵薄之力。倘若尚存阙漏敬请不吝斧正俾便精进