有条件地根据元素是否包含特定子元素来对元素进行样式化？ [英] Conditionally style an element based on whether it contains a particular child element?

问题描述

这是关于我正在处理的网站上的导航菜单：

我已经对这些特定的锚点（subnav按钮）应用了悬停样式：

This is in reference to a nav menu on a site I am working on:
I have applied a hover style to these particular anchors (subnav buttons):

ul#css3menu ul li:hover>a {

现在我想进一步对任何具有子span元素的锚点进行风格化。我如何编码呢？​​

我通过将样式应用到span元素来使它工作：

Now I want to further style any of these anchors that have a child span element. How could I code that?
I have it somewhat working by applying the style to the span element:

ul#css3menu ul span:hover{

问题是样式只有在悬停（整个subnav按钮包括其填充）

The problem with this is the style is only applied when hovering over the span element's space rather than while hovering over the anchor that is parent to the span (the entire subnav button including its padding)

推荐答案

p> CSS目前没有办法检查孩子（或者，本质上是一个父selctor，在讨论css时经常出现的一个想法）阅读更多： http://css-tricks.com/parent-selectors-in-css/ ）

为了创建类似的样式，你必须使用jQuery（或javascript ...）

In order to style something like that, you'd have to use jQuery (or, javascript...)

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

如果你所做的不是动态的，最简单的方法是先给这些列表一个类，然后对它们进行风格化。

If what you do is not dynamic, it would always be easiest to give a class to those lists beforehand and style them.

这篇关于有条件地根据元素是否包含特定子元素来对元素进行样式化？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！