根据元素是否包含特定的子元素有条件地设置元素的样式？答案

【问题标题】：Conditionally style an element based on whether it contains a particular child element?根据元素是否包含特定的子元素有条件地设置元素的样式？
【发布时间】：2014-05-18 20:56:04
【问题描述】：

这是指我正在处理的site 上的导航菜单：
我已将悬停样式应用于这些特定的锚点（子导航按钮）：

ul#css3menu ul li:hover>a {

现在我想进一步设置这些具有子 span 元素的锚点的样式。我该如何编码？
通过将样式应用于 span 元素，我让它有点工作：

ul#css3menu ul span:hover{

这样做的问题是样式仅在悬停在 span 元素的空间上时应用，而不是在悬停在作为 span 父级的锚上时应用（整个 subnav 按钮包括其填充）

【问题讨论】：

Is there a CSS parent selector?的可能重复
使 span 成为一个块元素，所以它覆盖了它的父元素的整个宽度，给我们一个小提琴来给你一些答案
span 已经是使用 - ul#css3menu span{display:block;} 定义的块元素

标签： css hover conditional-statements nav submenu

【解决方案1】：

CSS 目前没有办法检查孩子（或者，本质上是一个“父母选择器”，在关于 CSS 的讨论中经常出现一厢情愿的想法。阅读更多：http://css-tricks.com/parent-selectors-in-css/）

为了设置类似的样式，您必须使用 jQuery（或者，javascript...）

$('ul').each(function () {
  if ($(this).find('span').length) {
    $(this).css({your style here});
  }
}

如果你所做的不是动态的，那么事先给这些列表一个类并设置它们的样式总是最简单的。

【讨论】：

真可惜。我希望在没有 javascript 的情况下完成它。

【解决方案2】：

我刚刚想出了一个不用 JS 的绝妙解决方案！！
锚点上的填充是 8px 并且跨度上的填充设置为 0 所以我将跨度上的填充更改为 8 并将边距设置为 -8 现在样式在悬停整个按钮时有效并且我仍然能够保持按钮的大小！上火了！

ul#css3menu span{
display:block;
padding:8px;
margin:-8px 0 -8px -8px;
}

我不得不单独保留右边距以保持按钮的宽度和下一级子导航的定位。

【讨论】：