CSS Parent Selector :has All In One
CSS Parent Selector :has All In One
WD 阶段，生成环境暂不可用 ???????
https://caniuse.com/?search=%3Ahas
CSS Selectors Level 4 :has
pseudo-class / 伪类
/* For example, the following selector matches only elements that contain an ![]()
child: */
a:has(> img)
/* The following selector matches a element immediately followed by another element:*/
dt:has(+ dt)
/* The following selector matches elements that don’t contain any heading elements:*/
section:not(:has(h1, h2, h3, h4, h5, h6))
/* Note that ordering matters in the above selector. Swapping the nesting of the two pseudo-classes, like:*/
section:has(:not(h1, h2, h3, h4, h5, h6))
/* ...would result matching any element which contains anything that’s not a heading element.*/
https://www.w3.org/TR/selectors-4/
https://developer.mozilla.org/en-US/docs/Web/CSS/:has
demo
Your browser doesn't support CSS :has. Please view it in Safari 15.4 or the latest Chrome Canary.
.alert {
display: block;
padding: 1rem;
text-align: center;
margin-bottom: 1rem;
background-color: #ffeeee;
border: 1px solid red;
border-radius: 5px;
// font-size: 0.75rem;
font-size: 1rem;
line-height: 1.5rem;
/* ? 1.5 rem; !=== 1.5rem; ?, 数字与rem 之间不能有空格 ! */
/* line-height: 1.5 rem; */
color: red;
}
// 特征检测，优雅降级，渐进增强
@supports selector(:has(*)) {
.alert {
display: none;
}
}
refs
https://ishadeed.com/article/css-has-parent-selector/
?xgqfrms 2012-2020
www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！
原创文章，版权所有??xgqfrms, 禁止转载 ???，侵权必究??！