我要投稿 投诉建议

元素是否是直接跟在

元素之后。我们还可以将它与表单元素一起使用来检查输入是否获得焦点：效果！1.标题样式处理章节标题有两种情况，一种是只包含标题，另一种是包含标题和链接。根据是否有链接定义不同的样式：

最新文章

查看全部

.section-header{display:flex;justify-content:space-between;}.section-header:has(>a){align-items:center;border-bottom:1pxsolid;padding-bottom:0.5rem;}:has(>a)这里用的是只选择直接子元素2.卡片布局中的卡片操作有两种：一种只有一个操作（链接），而other有多个操作（保存、分享等）。当一张图片有多个操作时，需要在这些操作上加上display:flex，可以这样实现：喜欢保存更多.card-actions:has(.start,.end){display:flex;justify-content:space-between;}3.卡片的圆角根据是否重置卡片组件的border-radius.card:not(:has(img)).card-content{border-top-left-radius:12px;border-top-right-radius:12px;}.cardimg{border-top-left-radius:12px;border-top-right-radius:12px;}.card-content{border-bottom-left-radius:12px;border-bottom-right-radius:12px;}效果如下：4.filter组件有一个组件有多个options，当他们没有被选中时，没有reset按钮显示是的。选择其中一个选项后，将显示一个重置按钮。这可以使用:has选择器轻松实现：.btn-reset{display:none;}.multiselect:has(input:checked).btn-reset{display:block;}5.有时可能会显示或隐藏表单元素required根据先前的选择显示特定的表单字段。下面的例子中，当下拉框中选择了“other”字段时，会显示otherreason输入框：使用CSS:has选择器检查选择菜单中other字段是否被选中，并显示otherreasoninputbox在此基础上：.other-field{display:block;}form:has(option[value="other"]:checked).other-field{display:block;}6.导航栏有一个navigationbarwithasubmenu,Showsubmenuwhenmousehoversovermenuitem：我们需要做的就是根据是否显示子菜单显示或隐藏右侧的箭头。这可以使用:has选择器轻松实现，这里只需检查ul是否包含在li元素中：li:has(ul)>a:after{content:"";}7.在某些仪表板上强制警报，它用户可能需要注意重要警报。在这种情况下，页面内提醒可能还不够。例如，在这种情况下，可能会向标题元素添加红色边框和深红色背景色。这增加了用户快速注意到警报的可能性。CSS:has检查.main元素是否有警报。如果是这样，请将以下样式添加到标题中：.main:has(.alert).header{border-top:2pxsolidred;background-color:#fff4f4;}8.切换配色方案可以使用CSS来改变：has网站的配色方案。例如，如果您有多个使用CSS变量构建的主题，您可以通过菜单在它们之间切换。html{--color-1:#9e7ec8;---彩色-2：＃f1dceb;}选择另一个主题时将更改CSS变量：html：html：has（option[value=“blueish'']：necked）{-color-1：＃9e7ec8;--color-2:#f1dceb;}显示效果如下：9.带图标的按钮有默认的按钮样式。当按钮包含图标时，使用flexbox使按钮的内容居中：.button:has(.c-icon){display:inline-flex;证明内容：居中；align-items:center;}10.Multiple按钮有一组动作按钮，如果有2个以上的按钮，最后一个按钮显示在右边：这可以使用数量查询来实现。下面的CSS将检查按钮的数量是否为3个或更多。如果是，最后一个弹性项目将使用margin-left:auto:.btn-group{display:flex;对齐项目：居中；gap:0.5rem;}.btn-group:has(.button:nth-last-child(n+3)).button:last-child{margin-left:auto;}11.根据数字改变网格项目使用CSS网格布局，您可以使用minmax()函数创建一个真正响应迅速且自动调整大小的网格项目。然而，这可能还不够，我们还想根据项目的数量来改变网格。.wrapper{--item-size:200px;显示：网格；网格模板列：重复（自动填充，minmax（var（--item-size），1fr））；gap:1rem;}当有5个项目时，最后一个将换行：这可以通过检查.wrapper中是否有5个或更多项目来解决。同样，这使用了数量查询的概念。.wrapper:has(.item:nth-last-child(n+5)){--item-size:120px;}效果如下：浏览器支持：has选择器的支持如下：可以在@supports规则中使用CSS判断浏览器是否支持选择器：@supportsselector(:has(*)){}参考：https://ishadeed.com/article/css-has-parent-selector/

上一篇：前端的三种数据绑定技术

下一篇：NoSQL数据库类型说明：列式数据库

一篇文章将带你了解一个全新的CSS选择器：Has()相关文章

• 马云发表署名文章！不争“首富”，争“第一包袱”
• VR商业化元年即将到来，国内的生态系统准备得怎么样了？
• 革命性破坏？传闻出门问问新品将解决智能手表续航痛点
• Oculus Rift 售价 599 美元，将于 3 月发售
• 独家专访Oculus VR创始人！虚拟现实将在哪里爆发？
• 亚马逊将推出即插即用智能音箱增强型低音炮Amazon Ech
• 倒计时1天！ OPPO官宣R17即将开售
• 行业∣比特大陆推出安全AI芯片，安全行业将面临超维度对手
• 智能娱乐硬件+泛娱乐将引领国内VR-AR产业走向何方？
• 谷歌隐形眼镜即将量产商业化
• 谷歌能否将其 VR 耳机的价格下调一半至 49 美元以重振市
• 智能手表或将通过物联网“回归”市场
• 华为P20的新配色或将引领秋冬潮流，成为时尚圈新宠
• 2014年，智能可穿戴设备将占领世界
• 可以比医生更好地预测死亡，人工智能将如何改善临终关怀
• 雷鸟科技发布全球OTT白皮书！ 2020年全球OTT视频内容
• 预测！ 2016年手机+可穿戴设备将引发怎样的化学反应？
• Mobvoi Ticwatch 2 是一篇深度评测，相比Ti
• 2023年全球智能家居市场规模将达1550亿美元
• 选择合适的净水器加盟品牌将帮助您少走弯路，多兰斯揭秘加盟秘诀

最新推荐

• 1Cool House“全球智能加速器”沙龙将于8月10日在深
• 2石墨烯可以将普通纸张变成用于柔性显示器和可穿戴设备的新材料
• 3三星 Gear VR 将实现手部追踪
• 4LV高管！瑞士奢侈手表行业将受益于智能手表的繁荣
• 5VR行业发展分析！告别“野蛮生长”，将进入洗牌期
• 6VR设备数量或将在5年内超越智能手机
• 7小米手环3来了！华米皇王！今年发布会即将发布
• 8魅族官方微博提示！魅族悬浮音箱Gravity即将在中国上市
• 9助力智慧生活，Formate新品T68即将在天猫、京东开售
• 10雷军透露，小米VR产品将于8月、9月发布

猜你喜欢

• 1荣耀首款智能手表S1今日发布 谜底即将揭晓
• 2预测！ VR行业将迎来五年来首轮行业机遇
• 3iPhone 7 将于 9 月 7 日发布，Apple Wa
• 4神秘配置引发热议360新手机产品或将搭载新端口
• 5国家发改委宣布家电将迎来新增长
• 6PS5和PS5二代VR预计将于2020年发布
• 7苹果的祝福！ JDI将全力进击智能手表市场
• 8可穿戴设备市场将在“大规模灭绝”后重生
• 9可穿戴医疗设备的普及将扩大对稀有金属的需求
• 10传闻苹果iWatch将配备LG的OLED显示屏
• 11高通新款智能手表芯片将于9月10日发布
• 12东南大学联合联想研发“可穿戴智能心电衣”，年底前将投入公测
• 13苹果有意削弱iPhone！可穿戴设备将取代它
• 14“狼”来了！ 9月智能手表市场或将发生质变
• 152020年VR市场将突破千亿工信部推动行业标准出台
• 16Jibo即将来到中国，这次是会说中文的可爱小神
• 172017年，30%的可穿戴产品将“隐形”
• 18去年，VR市场仍然以硬件为主，未来AR将超越VR
• 19谷歌将于 5 月发布“全球最高分辨率 OLED 玻璃显示屏”
• 20可穿戴设备或将成为液晶面板主流应用

Copyright © 2012-2022 程序源 版权所有豫ICP备2022028201号

重要申明：本站所有的文章、图片、评论等，均由网友发表或上传并维护或收集自网络，属个人行为，与本站立场无关。 如果侵犯了您的权利，请与我们联系，我们将在24小时内进行处理、任何非本站因素导致的法律后果，本站均不负任何责任。