CSS选择器

has

场景：当卡片内有图片时，改变卡片样式

以前

// JS to add a class
document.querySelectorAll('.card').forEach(card => {
  if (card.querySelector('img')) {
    card.classList.add('card-with-image');
  }
});

/* Then style the class */
.card-with-image {
  border: 2px solid #61dafb;
}

现在

/* Select any .card that has an <img> inside it */
.card:has(img) {
  border: 2px solid #61dafb;
  padding: 10px;
}

实例应用

// input 错误提示
/* Select an input that has an adjacent sibling .error */
input:has(+ .error-message) {
  border-color: red;
}

// 当一个容器里有超过5个子项时，改变布局
/* Select a .grid-container that has at least 6 children */
.grid-container:has(div:nth-child(6)) {
  grid-template-columns: repeat(3, 1fr); /* 切换到三列布局 */
}

is

以前

article h1,
article h2,
article h3,
article h4,
article h5,
article h6 {
  color: #333;
  margin-bottom: 1em;
}

现在

/* One selector to rule them all */
article :is(h1, h2, h3, h4, h5, h6) {
  color: #333;
  margin-bottom: 1em;
}

/* Hover state is also super clean */
article :is(h1, h2, h3, h4, h5, h6):hover {
  color: #61dafb;
}

where

:is(header, #main) p { color: blue; } /* #main的权重是100，所以这条规则权重是101 */
:where(header, #main) p { color: red; } /* :where权重是0，所以这条规则权重是1 */
p { color: green; } /* p的权重是1 */

如何选择

简化选择器，并覆盖掉默认样式时，用 :is() 。
当你希望提供一个 “可被轻松覆盖”的默认样式时，用 :where() 。
比如你在写一个基础样式库，希望用户可以非常容易地用他们自己的简单选择器,来覆盖掉你库里的样式，那么用:where()就非常合适。它就像在说：“我这个样式，谁都能欺负”。

FEATURED TAGS

iOS OC C Xcode MIMEType 屏幕旋转 Mac 工具 SQLite3 重命名证书+内购 Pod 像素 pch 支付协议税务 APP转让审核银行卡格式化 git 描述文件命令行沙盒日志 i386 x86_64 控制台log xcode10&iOS12 正则 textfield 输入限制真机支持封面尺寸 SDWebImage Ruby RVM 渐变色 jekyll 水印富文本标签 M3U8 动、静态库异步上传 Url编码解码 AlertController 保活 pod报错特定UI横竖屏 Launch版本号 ijkplayer 适配手势截图网络和信号礼物缓存手绘礼物 UIPickerView 文件权限键盘和菜单耗时卡顿国际化 Paypal AWSS3 npm、Node 控制台 warning 扩展防盗链动画分析 CallKit 侧滑重置根控制器播放器裁剪日志 bugly uniapp Swift 文字翻转跨域 WebClip 网络请求地图导航 ZSH SPM Vapor 导航验证码杀进程 Ubuntu Android JWT vue html-js style-class ssh PHP jks css Runtime tree uniCloud 圆角 flex block 图形验证码 gtm share Combine nvm github 存储总结

has、is、where

has

场景：当卡片内有图片时，改变卡片样式

is

where

CATALOG

FEATURED TAGS

FRIENDS