Question

如果它包含 h3 ，我会将背景的CSS规则更改为li.li-class。我有这样的HTML：

<div class="div-class">
    <ul>
        <li class="li-class">
            <span itemprop="something">
                <h3>Some title</h3>
            </span>
        </li>
    </ul>
</div>

和li背景的CSS是：

.div-class ul li:nth-child(2n+1) {  background: #f4f4f4; }

li.li-class的CSS选择器在哪里？

我看了这个问题Is there a CSS parent selector?并尝试了代码，但在这种情况下不起作用。谢谢大家

Answer 1

正如评论中所提到的，使用纯CSS是不可能的。

然而，使用jQuery .has()：

会很直接

$("li").has("h3").addClass("yellow");

对于HTML：

<style>
.yellow{
  background-color:yellow;
}
</style>    
<div class="div-class">
  <ul>
    <li class="li-class">
      <span itemprop="something">
        <h3>Some title</h3>
      </span>
    </li>
    <li class="li-class">
      <span itemprop="something">
        <p>
          Not a header
        </p>
      </span>
    </li>
  </ul>
</div>

将查看每个li元素，如果它具有后代h3元素，则会将黄色类添加到li。

JSFiddle example

您还可以使选择器更具体，因此它不会选择所有li，而只会选择<div class="div-class">中的选项卡

$("div.div-class").find("li").has("h3").addClass("yellow");

Answer 2

如果你通过php创建html，你有最终的控制权：

<?php
  $html = '';
  foreach ($rows as &$row) {

    // just figure out if you need the class
    // before making the html - php is power

    if (!empty($row['h3'])) {
      $lih3_class = 'h3-in-li';
    } else {
      $lih3_class = '';
    }

    $html .= '<li class="li-class '.$lih3_class.'">';
    $html .= ''; // put in your li contents as normal
    $html .= '</li>';

  }
  echo $html;
?>

CSS多父选择器

2 个答案: