核心内容摘要
“卷王”驾到：4核Cortex-A7搭配RISC-V MCU的全志T153开发板78元杀疯了
S选择器这锅老汤从清汤寡水到浓油赤酱的30味秘料CSS选择器这锅老汤从清汤寡水到浓油赤酱的30味秘料说实话我刚学前端那会儿写CSS就是纯靠体力活。
打开DevTools选中元素复制那个长得离谱的class名字然后直接!important伺候。
那时候我觉得CSS就是个玄学——有时候写了不管用有时候没写却生效了浏览器就像个叛逆期的 teenager你让它往东它偏往西。
后来才搞明白问题出在我根本不理解选择器这玩意儿。
HTML搭好了骨架CSS负责装修但装修队得知道要给哪家哪户刷漆对吧选择器就是你的GPS定位系统。
今天咱们把这30个选择器全翻出来从最常见的到那些躲在MDN角落里吃灰的冷门货争取看完这篇你以后写样式能做到指哪打哪而不是靠我猜我猜我猜猜猜。
基础四件套标签、类、ID和那个星号刚入门的时候老师教的第一招肯定是标签选择器。
就是你直接写div、p、h1这种选中页面上所有这个标签。
简单粗暴但坑也明显——它是全局打击啊你写个p { color: red; }整页的文字全红了包括页脚版权信息里的小字儿。
所以实战中标签选择器一般用来 reset 样式或者真的确定这个页面某元素就该长这样。
比如我想让所有图片默认是块级元素防止下面出现那个诡异的空白缝隙/* 全局图片基础设置消除行内块默认间隙 */img{display:block;max-width:100%;/* 防止图片撑爆容器 */height:auto;/* 保持比例 */}类选择器.box才是咱们吃饭的家伙。
一个元素可以挂多个类class“btn btn-primary btn-lg” 这种写法太常见了。
这里有个小技巧用类选择器的时候命名别搞什么.left、.red这种不然哪天产品经理说把红色改成蓝色你就尴尬了。
语义化命名比如.user-card、.nav-link维护起来舒服得多。
ID选择器#header威力大但限制也大一个页面理论上只能有一个ID虽然浏览器不报错但JS那边getElementById可就懵了。
而且ID的权重高得离谱100个类选择器都干不过一个ID。
所以现代开发里ID主要是给JS挂钩子用CSS里尽量少用除非你真的确定这个东西独一无二比如页面顶部的那个返回顶部按钮。
通配符*这个家伙新手爱得不行老手看到就头疼。
* { margin: 0; padding: 0; }确实能快速清零默认样式但性能代价太大了——浏览器得遍历DOM里的每一个节点现在都用更精准的 reset 方案比如 normalize.css或者至少限定个范围body * { ... }都比裸奔的星号强。
/* 错误示范性能黑洞 */*{box-sizing:border-box;}/* 正确姿势限定范围 */*, *::before, *::after{box-sizing:border-box;}看到没后面那个*::before和*::after也得带上不然伪元素继承不到。
关系户们后代、儿子、隔壁老王和远房亲戚好了基础单兵作战的选择器讲完了现在开始组CP。
最常用的是后代选择器也就是空格.nav li。
这表示选中class为nav的元素里面所有的li不管是儿子、孙子还是曾孙子一视同仁。
但问题就出在这个一视同仁上。
有时候你只想管儿子不想管孙子。
比如一个多级菜单你想只给第一层的li加边框结果后代选择器把里面嵌套的子菜单也加上了整个界面糊成一坨。
这时候就得请出子代选择器。
/* 这个会选中.nav里所有层级的li包括嵌套很深的那种 */.nav li{border-bottom:1px solid #eee;}/* 这个只选直接儿子子菜单的li不受影响 */.nav li{border-bottom:1px solid #eee;}兄弟选择器这俩货很多人搞混。
相邻兄弟和通用兄弟~就差一个符号作用天差地别。
h2 p表示紧跟在h2后面的那个p注意是紧跟着中间隔了别的元素就无效了。
而且只能选一个。
通用兄弟~就宽容多了h2 ~ p表示h2后面的所有p元素中间隔着div、img什么的都不影响只要在同个爹底下排在h2后面就行。
这个在做表单布局的时候特好用比如错误提示信息/* 当输入框聚焦且输入无效时显示后面的错误提示 */input:invalid:focus ~ .error-msg{display:block;color:#ff4444;font-size:12px;margin-top:4px;}/* 而相邻兄弟适合做那种标题后面紧跟的段落特殊处理 */h2 p{font-size:
2em;color:#666;/* 这是摘要样式只针对紧跟标题的第一个段落 */}属性选择器正则表达式既视感这个系列的选择器简直是苦口婆心的老母亲专门管那些带有某种属性的元素。
最基础的是[title]选中所有带title属性的元素不关心值是什么。
然后[titleexact]是精确匹配。
但精彩的在后面那些模糊匹配。
[class^btn-]选中class以btn-开头的比如btn-primary、btn-large、btn-danger这在写按钮组件的时候太好用了批量处理所有按钮基础样式。
[class$-active]是以什么结尾适合做状态类。
[class*col-]是包含某字符串Bootstrap的栅格系统底层就在用这个。
还有更精细的[class|btn]这个 match 的是 btn 或者 btn- 开头的必须是连字符分隔的。
用来处理语言属性 lang“zh” 或 lang“zh-CN” 这种场景特别准。
/* 所有外链自动加个小图标 */a[href^http]::after{content:↗;font-size:
8em;margin-left:2px;}/* PDF文件特殊标识 */a[href$.pdf]::before{content:[PDF] ;color:#d9534f;}/* 包含特定数据属性的元素高亮 */[data-status*urgent]{border-left:4px solid #ff6b6b;background-color:#fff5f5;}属性选择器还能组合input[typetext][required]表示同时满足两个条件的。
这个功能经常被忽略但其实比写一长串类名清晰多了。
伪类大家族状态、位置和表单伪类这玩意儿用冒号开头表示元素的某种状态或位置。
链接相关的四个状态必须按顺序写:link未访问、:visited已访问、:hover鼠标悬停、:active激活瞬间。
记忆口诀就是爱恨原则LoVe HAte顺序错了有些样式会被后面的覆盖。
:focus在可交互元素上很重要但别直接用得用:focus-visible这样只有键盘聚焦的时候才显示那个 outline鼠标点击的时候不显示体验好得多。
现代浏览器都支持了赶紧换。
结构伪类是面试重灾区。
:first-child、:last-child表面意思是第一个子元素和最后一个子元素但实际上前提是你得先选中对应标签。
比如p:first-child不是选中第一个p而是选中的那个p必须是它爹的第一个孩子。
如果它爹第一个是div后面才是p那这个p就匹配不上。
这就是为什么有时候你写.item:first-child死活不生效——可能前面有个注释节点或者文本节点在DOM里也算个孩子只是你看不见。
用:first-of-type会保险点它只看同类型的兄弟。
:nth-child()这个函数简直是个数学公式现场。
:nth-child(2n)是偶数项:nth-child(2n
是奇数项:nth-child(-n
是前三个。
做斑马纹表格或者那种左右交替的布局第1个左图右文第2个右图左文神器。
/* 斑马纹表格偶数行背景色不同 */tbody tr:nth-child(even){background-color:#f8f9fa;}/* 只选前三个 */.feature-list li:nth-child(-n
{font-weight:bold;color:#e74c3c;}/* 每三个一组选中每组的第一个1, 4,
.. */.gallery-item:nth-child(3n
{margin-left:0;/* 清除左外边距实现网格布局 */}表单伪类简直是验证逻辑的救世主。
:checked选中被勾选的checkbox或radio配合相邻兄弟选择器能实现纯CSS的自定义单选框。
:disabled、:enabled管可用状态。
:valid、:invalid配合正则自动验证。
:placeholder-shown判断输入框是否显示着placeholder文字也就是用户还没输入用来实现那种输入时标签上浮的Material Design效果不用JS就能做。
/* 纯CSS实现自定义复选框 */.custom-checkbox{display:none;/* 隐藏原生的 */}.custom-checkbox label{position:relative;padding-left:30px;cursor:pointer;}/* 用label的before画个假方框 */.custom-checkbox label::before{content:;position:absolute;left:0;top:0;width:18px;height:18px;border:2px solid #ddd;border-radius:3px;transition:all
3s;}/* 选中状态时画勾用border技巧 */.custom-checkbox:checked label::after{content:;position:absolute;left:5px;top:1px;width:6px;height:12px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}.custom-checkbox:checked label::before{background-color:#3498db;border-color:#3498db;}还有否定伪类:not()以前只能传简单选择器现在可以传复杂列表了:not(.active, .disabled)。
:is()和:where()这俩是逻辑或的关系减少代码重复特别是那种深度嵌套的选择器用:is(h1, h2, h
一口气选中三种标题。
:where()和:is()差不多但:where()的权重是0不会影响优先级计算很适合写reset样式。
伪元素 content 是万能的伪元素用双冒号::单冒号也能用那是历史遗留创造出不存在的元素。
::before和::after必须配合content属性哪怕 content: “” 空字符串也得写不然不显示。
这俩货能干的事超乎想象清除浮动虽然现在都用display: flow-root了、画三角箭头、做引用符号、实现Tooltips。
::first-letter实现首字下沉效果杂志排版经常用。
::first-line选中第一行文字注意这个只能用于块级元素而且选中的内容会随容器宽度变化而变化很智能。
::selection管文字被选中时的样式可以改变高亮颜色和文字颜色但要注意对比度别弄成白底黄字看不见了。
::placeholder专门管输入框的placeholder文字样式可以改颜色、字体大小但就是不能改位置得靠padding模拟。
::marker是list-item前面的那个标记点通常是黑点或数字现在可以自定义了改颜色、改字体甚至用 emoji 或者特殊符号/* 自定义列表标记用emoji增加趣味性 */.todo-list li::marker{content:☐ ;color:#95a5a6;font-size:
2em;}.todo-list li.completed::marker{content:☑ ;color:#2ecc71;}/* 鼠标hover时的文字选中颜色 */::selection{background-color:#ffeaa7;color:#2d3436;text-shadow:none;/* 清除可能存在的文字阴影提高可读性 */}现代布局神器:has() 真香警告Chrome 105 终于全面支持:has()了这玩意被称为父选择器但准确说它是相对选择器。
以前CSS只能往下选父选子不能往上选子选父。
:has()打破了这个限制。
语法是.parent:has(.child)表示选中那些包含.child的.parent。
这简单的一句话解决多少年的痛点啊以前想实现当卡片里有图片时文字区域上移得写JS检测现在一行CSS/* 卡片里有图片时调整padding */.card:has(img){padding-top:0;/* 图片贴边不需要上padding */}/* 表单里有错误提示时边框变红 */.form-group:has(.error-message) input{border-color:#e74c3c;background-color:#fdf2f2;}/* 甚至能配合 :not 实现没有图片的卡片特殊样式 */.card:not(:has(img)){display:flex;align-items:center;/* 纯文字卡片垂直居中 */}还能组合判断.card:has(img):has(.badge)表示既有图片又有badge的卡片。
配合兄弟或子代选择器在has里面用能实现超级复杂的逻辑。
比如 “相邻兄弟里有特定类名的元素”/* 如果当前元素后面跟着一个.special自己就变窄 */.item:has( .special){width:60%;}在微信小程序里这个选择器目前还支持得不好 uni-app 转义过去可能会出问题用的时候记得看兼容性表。
权重、性能和那些祖传代码说完了招式得聊聊心法——Specificity 权重。
内联样式style属性是1000分ID是100分类、属性、伪类是10分标签和伪元素是1分。
星号和继承是0分。
!important是作弊器直接无视分数但滥用会导致整份CSS不可维护只在工具类比如.hidden { display: none !important; }里用。
计算权重的时候不是简单的加法是位权制。
一个标签永远小于
一个类哪怕你写1000个标签选择器.nav div ul li a span
也比不过一个.active
。
所以不要试图用选择器长度去对抗权重该加类名就加类名。
性能方面浏览器解析CSS是从右往左的。
.nav ul li a这个选择器浏览器先找到所有a然后看哪些a在li里再看哪些li在ul里最后看是不是在.nav里。
所以最右边的选择器key selector尽量具体点别用通配符或标签选择器结尾。
ID选择器性能最好因为ID在DOM里唯一找起来快。
那些.header .nav .list .item .link span的八辈祖宗链赶紧 refactor 掉。
每一层嵌套都在增加浏览器负担而且只要中间某个类名变了整个规则就废了。
BEM 命名虽然看起来冗长.block__element--modifier但扁平化的结构在性能和可维护性上吊打深度嵌套。
调试技巧方面Chrome DevTools 的 Elements 面板里选中元素看 Styles 侧边栏被划掉的样式就是权重不够被覆盖了。
鼠标悬停在选择器上能看到匹配到了哪些DOM节点。
console 里用$$(.your-selector)能实时测试选择器看能选中几个元素不用刷新页面。
还有个冷门但好用的是:scope在普通CSS里相当于:root但在style scoped虽然这个属性被淘汰了但Shadow DOM里还有类似概念里表示当前组件的根。
现在在普通的Chrome控制台测试中配合document.querySelector(:scope)能快速定位当前上下文。
最后叨两句CSS选择器这东西真不是靠背的。
我到现在还要时不时查一下:nth-child的公式怎么写但这不妨碍我写样式。
关键是要理解组合逻辑——你知道有哪些基础的积木块知道它们能怎么拼遇到需求的时候能想到哦这个可以用属性选择器伪类搞定而不是我要给这20个元素分别加个类。
多玩玩CodePen把那些冷门选择器拿出来溜溜看看浏览器到底是怎么解析的。
写活了的选择器能让你的HTML结构保持语义化干净CSS也简洁有力。
写死了的选择器那就是在给自己挖坑三个月后回来看连你自己都不知道.wrapper .container .main-content article div p:first-child这串东西到底要选谁。
反正现在:has()都支持了以前很多需要JS介入的交互都能纯CSS做了赶紧把这波红利吃起来。
别像某些老项目一样还在用 jQuery 给父元素 toggle class浏览器原生都支持父选择了咱得跟上时代不是欢迎来到我的博客很高兴能够在这里和您见面希望您在这里可以感受到一份轻松愉快的氛围不仅可以获得有趣的内容和知识也可以畅所欲言、分享您的想法和见解。
推荐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等工具吾辈才疏学浅摹写之作恐有瑕疵。
望诸君海涵赐教。
望轻喷嘤嘤嘤非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。
愿斯文对汝有所裨益纵其简陋未及渊博亦足以略尽绵薄之力。
倘若尚存阙漏敬请不吝斧正俾便精进