写CSS写了好些年如果要我挑一个“学了立刻能用、用了立刻见效、但很多人一直没认真学”的知识点属性选择器绝对排前三。系列笔记写到第19期前面聊完基础选择器、组合器和伪类这一期专门把CSS属性选择器掰开揉碎讲一遍——它在H5开发里的实用程度远比教科书上那几行例子要重得多。属性选择器到底解决什么问题打个比方基础选择器是通过“姓名”class、id、标签找人而属性选择器是通过“特征”找人。页面里一堆a标签有的下载、有的跳外部链接、有的是锚点想让它们长得不一样传统做法是逐个加class有了属性选择器直接看href的特征就能精准命中HTML不用动一个字符。表单校验状态、埋点标记、图标字体换肤、甚至是现在H5里常见的换肤切换都有它的用武之地。文章会从六个基本写法讲起深入优先级、性能、组合玩法最后附上我实际工作中踩过的坑。前端新手可以把这一篇当系统教程读有经验的开发者也能顺一遍有没有漏掉的知识盲区。1. 属性选择器是怎么运作的它到底牛在哪1.1 选择器的一种新维度不看名字看属性过去我们用标签选择器选div、p用类选择器选.box用ID选择器选#app。这三类都属于“命名式”选择——前提是你得提前起好名字。但HTML里还有一大片信息是用属性表达的比如href、src、type、>html[data-theme] .header { background-color: #1a1a1a; }加上了>input[typetext] { border: 1px solid #d0d7de; border-radius: 4px; }实际开发里它非常解压的地方在于别人写的页面满屏都是input没有class你接盘的时候不需要去猜哪个是哪个直接用属性值区分。我接手过好几个外包H5项目里面全是input裸奔靠的就是input[typeemail]这类精确匹配来补样式的。需要特别强调“完全相等”这个逻辑它区分大小写除非在HTML文档里属性值本身不区分大小写而且空格也算数。[typetext]和[type text]是完全不同的选择器后者基本选不中东西。2.3[attr~value]处理空格分隔的单词列表HTML里有些属性是空格分隔单词的最典型的是class本身和rel属性。我们来写一个实际例子a href/doc/help.pdf relexternal download下载文档/aa[rel~download]::after { content: ⬇; }这个匹配逻辑是“download”必须作为完整单词出现在空格分隔的列表里。实际应用时它能避免relexternal-download和relexternal download的混淆。判断规则是严格的external-download这一个词绝不等于external和download两个词。这个选择器在无障碍样式里也很实用比如选中带aria-describedby的元素做提示框样式、选中带>html[lang|zh] .intro { font-family: PingFang SC, Microsoft YaHei, sans-serif; }langzh和langzh-CN都能被命中但langzhCN不行。可以把它理解为“语言区域前缀匹配”。除此之外>a[href^http]:not([href*mysite.com])::after { content: ↗; font-size: 0.7em; }意思是只要是http开头的链接且网址里不含本站域名就在右上角加一个外链箭头。这个写法不需要给任何链接手动加class只要是编辑后台输出的富文本都能自动识别。另一个场景是href^tel:和href^mailto:能给手机号邮箱链接配专属图标。它的价值在于“批量捞”比如[href^#]捞锚点链接、[src^data:image]捞base64图片都是典型用法。2.6[attr$value]按后缀匹配文件类型一网打尽后缀匹配最提效的地方是文件类型区分。一个下载列表里有PDF、Word、ZIP肉眼根本来不及分但后缀能一刀切a[href$.pdf] { background: url(icon-pdf.svg) left center no-repeat; padding-left: 20px; } a[href$.doc]::after { content: Word; } a[href$.zip]::after { content: 压缩包; }这里有个细节要注意$做的是“后缀字符串”匹配不是“扩展名”匹配。hrefsetup.pdf?download1这类的链接不会被选中因为字符串结尾是1不是.pdf。如果真遇到带查询参数的下载地址得写成a[href$.pdf], a[href$.pdf?download1]或者配合*用更宽松的方式。后缀匹配在图片处理里也很有用比如头图、头像、缩略图分别存在不同目录下靠目录后缀就能差异化处理。2.7[attr*value]任意位置包含模糊匹配的一把好手*是全部写法里匹配范围最宽泛的适合“知道大概长什么样但不清楚具体位置”的场景。最典型的例子是区分CDN域名和业务域名之间的差异img[src*cdn.example.com] { loading: lazy; }再比如你想把所有alt文字里带“封面”二字的图片加一个边框img[alt*封面] { border: 2px dashed #f40; }不过它也有代价匹配范围广意味着容易误伤。比如你想选[href*product]结果https://example.com/product/list/和https://example.com/other/product/都会被命中如果这不是你想要的就得结合前缀或精确匹配收窄范围。这一条经验后面还会展开讲。3. 属性选择器在H5项目里的高频实战场景3.1 表单一键换肤状态全交给属性H5开发绕不开表单注册页、登录页、填写页到处都是input。传统做法是用class切换样式比如.input-error、.input-disabled。但表单控件的原生属性本身就带状态placeholder是否显示、disabled是否禁用、required是否必填、readonly是否只读。用属性选择器直接把这些状态“翻译”成样式能省掉一大半JS逻辑。我做过一个很典型的案例——会员注册页的输入框校验如果校验失败后端返回的时候把aria-invalidtrue打在对应input上不依赖class只依赖属性本身的状态更新input[aria-invalidtrue] { border-color: #e5484d; background-color: #fff5f5; }这样处理后逻辑层只需要维护aria-invalid完全不需要关心CSS类名。谁校验谁失焦都由属性状态表达代码的可读性和可维护性是明显上升的。另外还有一个被低估的细节input:placeholder-shown这个伪类虽然不属于属性选择器但它对属性选择器的理解是强关联的——继续深挖表单状态时可以一并组合使用效果非常顺手。3.2 图标字体和雪碧图用状态属性切换显示H5里经常用字体图标常见做法是让CSS为某个按钮分配不同的图标字符。这时候属性选择器可以帮我们在同一套HTML里切换图标类型而不是用多个class切换。比如通知列表状态可能是“未读”和“已读”图标不一样。结构里没有class只有一个>li classnotice-item>.notice-item[data-stateunread]::before { content: \e600; color: #f40; } .notice-item[data-stateread]::before { content: \e601; color: #999; }这比在JS里根据状态拼class再写两套CSS要轻。实际项目里像消息已读未读、订单状态流转、按钮禁用态都可以用>div classcard>.card[data-layouthorizontal] .card-title { flex-direction: row; } .card[data-layoutvertical] .card-title { flex-direction: column; }埋点属性承载了业务统计样式属性承载了视觉结构两者互不干扰而且语义明确。做H5的同学应该能直观感受到这种方案在团队协作里的好后台只需要维护一套数据属性前端就能同时拿到埋点和样式两种能力。3.5 页面换肤与主题切换属性选择器做大规模样式切换H5里的换肤需求其实一直存在比如用户可选择“浅色/深色”主题或者电商大促时的氛围换肤。最简单的方案就是给html标签上加一个>html langzh-CN>:root { --bg: #ffffff; --text: #222222; } html[data-themedark] { --bg: #1a1a1a; --text: #f5f5f5; }这个思路在H5里非常好用。有一个细节值得注意换肤方案选>.card[data-typevideo] .play-btn { display: block; } .card[data-typearticle] .play-btn { display: none; }还有一个我常用的搭配是元素限定input[typeradio][namepay-method]:checked .pay-card { border-color: #f40; }这里连用了input、[typeradio]、[namepay-method]、:checked四个条件叠起来选精确到用户选中的那一个支付方式。H5支付页面里这种写法很常见不需要为每一个支付通道单独写JS判断。如果想要更深层的精准控制还能叠加、、~等组合器比如选中某个li后面所有同级的特别项属性选择器在其中负责“定位身份”。4.2:not()函数配合属性选择器取反筛选:not()和属性选择器天生搭配能够把匹配范围快速“反向”缩小。常见用法有排除某种类型的input、排除某些状态下的元素、排除特定域名的外链。input:not([typesubmit]):not([typebutton]) { /* 只影响真正的输入框不影响按钮 */ }写:not()时有一个容易踩的坑里面的参数可以放属性选择器但括号里不支持复杂的选择器列表不同浏览器支持情况不一。比如:not([class])很好用但如果你写:not(.a, .b)部分旧内核版本可能失效。稳妥做法是拆成多个:not()串联而不是逗号并列。4.3 属性选择器的优先级到底怎么算很多人以为属性选择器和class优先级一样这句话对但对得不够彻底。优先级specificity四个维度里属性选择器确实和class处于同一层级都是“0-0-1-0”。十个属性选择器串联优先级会高于一个ID选择器0-1-0-0。具体数值一般按“a-b-c-d”来算ID是一档class/属性/伪类是一档元素/伪元素是一档。举个例子#app .content p[data-typeinfo]优先级的权重是ID 1个、class/属性 2个class和属性同层、元素1个记作1-2-1。而.content .info只有两个class记作0-2-0前者一定胜过后者。搞清楚这个才能理解为什么有时候属性选择器能“压过”你以为更重要的class。但需要注意的是优先级高不意味着必须滥用。优先级越高后续覆盖的成本也越高一旦样式想在新场景里被覆盖可能得写更多权限选择器。我的习惯是能用组合器精准匹配的时候不刻意用ID去拔高优先级。4.4 兼容性怎么做老内核是否还能用属性选择器在CSS3文档里定义完整事实上它并不是新东西早期IE7就已经支持大部分基础写法。具体对照[attr]、[attrvalue]IE7。[attr~value]、[attr|value]IE7。[attr^value]、[attr$value]、[attr*value]IE7。也就是说属性选择器在新旧环境里的兼容性整体是友好的。唯一要谨慎的是老IE不支持某些现代的伪类组合但那些问题通常和属性选择器本身无关。对于H5项目来说移动端WebView基本都是Chromium内核的天下这七个写法随便用不太存在兼容压力。就算要兼容旧内核属性选择器的性能也足够稳。5. 属性选择器真的影响性能吗迫不得已时的注意事项5.1 先搞清楚浏览器是怎么匹配选择器的很多前端一听选择器就紧张担心*匹配会不会很慢。要回答这个问题得知道浏览器匹配选择器的基本方向大多数时候是从右往左找的。也就是说浏览器拿到.a .b时会先去找所有.b元素再顺着往上层匹配.a。属性选择器不会让匹配“指数级变慢”真正影响渲染性能的是选择器的复杂度和页面元素数量。一个[href*product]在大量链接的页面里确实需要遍历很多节点但代价远不像想象中那么大几十个、一两百个元素根本弹不出性能波动。不过有一条经验可以记住如果页面特别大比如渲染几百上千条列表项的H5长列表使用属性选择器时尽量让“最右侧的选择器”尽量精确。右侧选择器的匹配面越窄浏览器需要往上回溯的元素就越少。5.2 什么时候真的需要注意性能说实话属性选择器本身把浏览器拖垮的场景我这么多年基本没见过。更常见的性能问题其实出在“像素级触发”上——比如H5里在滚动或动画过程中不断增删属性浏览器会反复触发样式重新计算这个才是最疼的。如果硬要说一条实战经验不要在频繁动画的节点上动态改变>[title产品说明]如果不加引号写成[title产品说明]语法上不是不能跑但空格和特殊字符会破坏匹配别给自己埋坑。另外属性的值如果是空字符串[attr]还是能匹配到的但[attr]不一定能匹配这个细微差别在实际动态渲染时要留意。6.3 连字符匹配|容易误选父级区域[attr|value]的作用对象需要考虑清楚它匹配的是“以value开头且后面是连字符”的情况。这个属性选择器如果放在一个父级节点上容易误选它下面的所有子孙元素。比如div langzh-CN p langzh这句话不该被选中/p /divhtml[lang|zh]会命中外层div但内层p[langzh]如果也要做样式优先级就得靠组合器理顺。别把“区域匹配”当成“精确匹配”就行。6.4 动态属性变化时的闪跳问题H5里经常用JS给元素动态加aria-busytrue之类属性控制loading样式。这个方案很好但要注意如果属性频繁切换并且伴随的是视觉动画页面可能会在那一两帧里出现样式闪跳。我遇到过的一个实际问题列表加载更多时给加载按钮加了>label span[data-required]::before { content: *; color: #e5484d; }只要HTML中给必填字段的span加上>p classellipsis>[data-line1] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-line2] { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }比分别定义两个class更语义化也方便JS统一生成。CSS文本省略和属性选择器组合算是一个冷门但好用的搭配。7.3 3D变换或动效组件的标签分发H5里做卡片动效、3D翻转这类效果时常常有“状态”切换。之前有朋友问我transform: rotateY(60deg) translateZ(300px)这类代码在不同状态下怎么切换实际结合属性选择器就很好管理div classcard3d>.card3d[data-facefront] { transform: rotateY(0deg) translateZ(0px); } .card3d[data-faceback] { transform: rotateY(180deg) translateZ(0px); }本质上和图标切换是一样的思路把状态打出来用属性选择器映射到变换组合。做动效时不建议在JS里直接改style.transform容易跟CSS transition打架用属性切状态更干净。7.4 外链参数自动标记业务来源H5运营页经常会带一长串追踪参数比如?spmhome_btn、?frombanner。给这种链接加个小角标说明来源我可以直接用a[href*frombanner]::after { content: 活动入口; background: #ff4d4f; color: #fff; }埋点参数本身就在URL里选择器直接读取它样式自动区分。活动运营上新时不用改一行HTML代码就能给特定渠道的链接挂提示排查数据和视觉还原都比较方便。8. 属性选择器和伪类的配合一个你没细想的维度属性选择器和伪类不是互斥的而是互相成就的。比较实用的组合是:checked、:disabled、:read-only等等与表单有关的伪类。这里的核心逻辑是伪类表达状态属性选择器表达属性“状态属性”叠加起来能让选择逻辑非常干净。比如只看“必填且已选中的单选框”input[typeradio][namesource][required]:checked { outline: 2px solid #f40; }这种写法让样式自身就携带了业务语义后续接手的人看到属性就能联想到业务规则不需要再翻一遍JS。还有一种组合是属性选择器配合:lang()多语言站点里根据语言环境自动调整排版。虽然:lang()本身已经很强大但结合>