有条件地根据元素是否包含特定的子元素来设置元素？

Question

这是参考我正在进行的site上的导航菜单：
我已经将悬停样式应用于这些特定的锚点（subnav按钮）：

ul#css3menu ul li:hover>a {

现在我想进一步设置任何具有子span元素的锚点的样式。我怎么能编码呢？ 通过将样式应用于span元素，我有点工作：

ul#css3menu ul span:hover{

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

Answer 1

CSS目前还没有办法检查孩子（或者，基本上是一个父母的选择器＆＃39;，在讨论css时常常会出现一种一厢情愿的想法。阅读更多：http://css-tricks.com/parent-selectors-in-css/）

为了设计类似的东西，你必须使用jQuery（或者，javascript ...）

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

如果您所做的事情不是动态的，那么事先将这些列表赋予这些列表并为其设置样式始终是最简单的。

Answer 2

我刚刚找到了一个没有JS的漂亮解决方案!!
锚点上的填充为8px，跨度上的填充设置为0，因此我将跨度上的填充更改为8并将边距设置为-8，现在样式在悬停整个按钮时仍然有效，我仍然能够保持按钮的大小！激起！

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

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