在这篇文章中，我们将查看：HAS（）CSS选择器现实世界中的使用以及如何通过减少需要编写的代码数量来使您的代码更好。

第一个案例：

您是否曾经创建过一个交互式组件，该组件需要在页面上其他地方修改样式的能力？
假设我们有一个带有导航项目的Navbar。单击导航项目后，将显示包含相关信息的下拉菜单。

让我们创建它。

这是一种常见的做法，是修改纳维尔的样式（例如，更改其高度，颜色，不透明度等），然后更改与导航项目相关的下拉字形从“”到“” “显示下拉列表时。

我觉得我一直都需要做这种事情。

我们知道，不可能直接从子选择器中直接修改父级选择器的样式。因此，旧的方法是使用JavaScript发挥这种效果，如下所示。

在切换“ toggledropdownmenu”的函数中，我们获得了纳维尔元素并根据下拉列表的当前状态更改其颜色。

每当我实施这样的事情时，我经常发现自己想知道是否值得改变颜色或身高或任何样式？

所以，让我们做一些魔术—

我们将修改Navbar Styles-Set如下：

我们利用：has（）选择器来验证“ nav”是否包含具有类名为“下拉”和“ show”的元素。如果存在这样的元素，则表明当前显示下拉菜单。因此，将更改Navbar的颜色。

这是这种情况的编码：

第二种情况：

假设我们有一张具有联系和位置的公司表，如下所示：

在表行中添加彩色悬停效果可能是一个不错的UX改进。此外，它可以帮助您的眼睛跟踪扫描桌子时的行。

但是，如果桌子只有一行怎么办？这个效果听起来没用，对呢？ 有什么解决方案？

是的，完全是。我们将使用：has（）选择器来决定是否将此悬停效果添加到表行中，具体取决于行的数量。

此代码段检查表是否至少有两个行（不包括标头），并相应地应用悬停效果。如果表仅包含一行，则不应用效果。

这是这种情况的编码：

因此，我们已经解释了使用此出色选择器的两种情况，它具有大量用途，您可以以自己的方式使用它。

随时在评论段ðð¼
中写下您的想法 祝你有美好的一天。