Html 检查一个元素在CSS中是否有另一个元素

我正在尝试将WooCommerce元素设置为流动的“导航栏”样式，该样式没有填充和右侧的按钮，如以下屏幕截图所示：

“产品”已添加到您的购物车中。

风格如下：

.woocommerce消息{
背景：透明！重要；
盒影：0 0 6px#ddd！重要；
边框：2px实心#8fae1b；
边界半径：5px；
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
弯曲方向：行反向；
填充：0；
}
.woocommerce消息.button.wc-forward{
边界半径：0；
左边框：2px实心#8fae1b；
背景：#8fae1b；
颜色：#fff；
过渡：0.2s不透明度；
}

但是有时候

.woocommerce消息

没有

按钮

元素，所以我留下的是零填充和挤压的外观。我找到了CSS选择器

：has（）

，并考虑将其用作

。woocommerce消息：has（button）

，并从中应用样式，但目前不支持浏览器

有没有其他方法可以根据HTML中是否存在按钮来有条件地设置此消息的样式？

使用jQuery（如果可能）是解决此问题的好方法：

HTML（未更改）：

“产品”已添加到您的购物车中。

CSS:

.woocommerce消息{
背景：透明！重要；
盒影：0 0 6px#ddd！重要；
边框：2px实心#8fae1b；
边界半径：5px；
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
弯曲方向：行反向；
}
.woocommerce消息.button.wc-forward{
边界半径：0；
左边框：2px实心#8fae1b；
背景：#8fae1b；
颜色：#fff；
过渡：0.2s不透明度；
}
/*我们的新班级*/
.woocommerce带有按钮的消息{
填充：0；
/*在此添加应应用于带有按钮子项的消息的所有CSS*/
}

JavaScript（使用jQuery）：

if（$（.woocommerce message”）.find（“按钮”）.length）{
$（“.woocommerce message”）.addClass（“带按钮的woocommerce message”）；
}否则{
$（“.woocommerce message”）.removeClass（“带有按钮的woocommerce message”）；
}

说明：

如果我们的

woocommerce message

元素具有类型为

button

的子元素，jQuery将添加带有button的类

woocommerce message，并应用所有所需的CSS。如果没有按钮子级，它将删除该类（如果存在）。例如，当用户向购物车添加项目时，可以运行此JavaScript



单击以阅读有关和的信息



请注意，使用jQuery元素类选择器“.”会将样式应用于具有该CSS类的所有元素。详细信息。
只需在
.woocommerce消息中添加顶部和底部填充物即可
好吧，然后我就失去了按钮的流畅外观。按钮周围会有空格。
。woocommerce消息：空
？也许-Hey@Paulie_D，这是一个很好的建议，但该选择器中的文本被认为不是空的。
.woocommerce消息
将包含文本内容，而不是按钮。太棒了。我会写一个类似于香草JS的东西，谢谢你，我没有想到要用JS。我很高兴你喜欢它！如果你需要帮助，请告诉我。