当前位置： 首页 > 科技观察

你不知道的CSS父级选择器

时间：2023-03-13 22:51:19 科技观察

你有没有想过使用CSS选择器来检查父元素中是否存在特定元素？例如，如果卡片组件中有图像，则向其添加display:flex。这在以前的CSS中是不可能的，而新的CSS选择器：has可以帮助我们选择包含特定元素的父元素。让我们来看看这个全新的CSS选择器吧！:has选择器概述在CSS中，我们不能根据元素中是否存在特定元素来设置父元素的样式。为此，我们必须创建一个CSS类。并根据需要切换课程。考虑以下示例：有两种类型的卡片：带图片和不带图片。这需要在CSS中完成：/*cardwithimage*/.card{display:flex;对齐项目：居中；gap:1rem;}/*没有图像的卡片*/.card-plain{display:block;border-top:3pxsolid#7c93e9;

卡片内容
cardcontent
这里创建一个类card-plain，专门用于没有图片的卡片，没有图片的时候不需要flex布局.如果使用CSS中的父选择器：has，则不需要写这个类，只用它来检查卡片是否包含.card-image:.card:has(.card-image){display:flex;align-items:center;}根据CSS规范，:has选择器可以检查父元素是否包含至少一个元素，或者一个条件，比如输入是否有焦点。:has选择器不仅检查父元素是否包含特定的子元素，还检查元素后是否跟有另一个元素：.cardh2:has(+p){}这将检查

元素是否是直接跟在

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

最新文章

查看全部
当图片有多个操作时，需要在这些操作中加上display:flex，可以这样实现：.section-header{display:flex;justify-content:space-between;}。section-header:has(>a){align-items:center;border-bottom:1pxsolid;padding-bottom:0.5rem;}2.卡片布局有两种卡片动作：一种只有一种动作（链接)，另一个有多个操作（保存、共享等）。当一张图片有多个操作时，需要在这些操作上加上display:flex，可以这样实现：喜欢保存更多.card-actions:has(.start,.end){display:flex;justify-content:space-between;}3.卡片的圆角根据是否重置卡片组件的border-radius有一张图片left-radius:12px;border-top-right-radius:12px;}.card-content{border-bottom-left-radius:12px;border-bottom-right-radius:12px;}效果如下：4.过滤组件有一个组件有多个选项,当它们没有被选中时,没有重置按钮被显示铺设。选择其中一个选项后，将显示一个重置按钮。这可以使用:has选择器轻松实现：.btn-reset{display:none;}.multiselect:has(input:checked).btn-reset{display:block;}5.显示或隐藏表单元素有时可能需要根据先前的选择显示特定的表单域。在下面的例子中，当下拉框中的“other”字段被选中时，显示otherreason输入框：使用CSS:has选择器检查选择菜单中other字段是否被选中，并显示otherreasoninputboxbasedonthis:.other-field{display:block;}form:has(option[value="other"]:checked).other-field{display:block;}6.navbar有navbarwithasubmenu,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;}效果如下：浏览器支持目前Safari15.4和Chrome已经有了:has选择器金丝雀得到了支持。可以使用CSS中的@supports规则判断浏览器是否支持选择器：@supportsselector(:has(*)){}参考：https://ishadeed.com/article/css-has-parent-selector/

你不知道的CSS父级选择器相关文章
最新推荐
猜你喜欢

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

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