CSS:如何选择ol标签中包含的所有ul标签

Question

我的HTML看起来像

<ol class='enlarge'>
<li>Larger
<ul>
<li>Normal
</li>
</ul>
</li>
</ol>

在你看到"更大"的地方，我希望字体更大。在你看到正常的地方，我希望字体大小是正常的。

我试过了

  ol.enlarge {
    font-size: 130%;
  }
  ul.enlarge {
    font-size: 70%;
  }

和

  ol {
    font-size: 130%;
  }
  ul > ol {
    font-size: 70%;
  }

和

  ol {
    font-size: 130%;
  }
  ol > ul {
    font-size: 70%;
  }

所有人都为我的

中的所有内容设置了更大的字体大小

谢谢！

-汤姆

Answer 1

ol ul应该足以定位减小字体大小所需的元素。

ol {
  font-size: 130%;
}
ol ul {
  font-size: 70%;
}

<ol>
  <li>Larger
    <ul>
      <li>Normal</li>
    </ul>
  </li>
</ol>

Answer 2

另一个想法是使用ol > li > ul {...}而不是ol > ul {...}。无论如何，这取决于您计划使用的标记。请记住，>意味着直接的孩子，这就是ol > ul不起作用的原因。

ol {
  font-size: 130%;
}
ol > li > ul {
  font-size: 70%;
}

<ol>
  <li>Larger
    <ul>
      <li>Normal
      </li>
    </ul>
  </li>
</ol>

Answer 3

您正在寻找一个后代组合器。选择元素ol任何ul元素。

ol {
  font-size: 130%;
}
ol ul {
  font-size: 70%;
}

<ol>
  <li>Larger
    <ul>
      <li>Normal
      </li>
    </ul>
  </li>
</ol>

---

为什么你的尝试失败了？

案例1：

您在标记中缺少类enlarge：

ol.enlarge {
  font-size: 130%;
}
ul.enlarge {
  font-size: 70%;
}

<ol class="enlarge">
  <li>Larger
    <ul class="enlarge">
      <li>Normal
      </li>
    </ul>
  </li>
</ol>

案例2：

没有有序列表元素 (ol( 作为直接子元素，这就是子组合器不起作用的原因。请注意，根据语义 HTML，ol 元素不能是ul元素的直接子元素。

ol {
  font-size: 130%;
}
ul>ol {
  font-size: 70%;
}

<ol>
  <li>Larger
    <ul>
      <ol>Invalid</ol>
      <li>Normal
      </li>
    </ul>
  </li>
</ol>

案例3：

与上述情况类似，没有ul元素作为ol元素的直接子元素。这又不是有效的标记。

ol {
  font-size: 130%;
}
ol>ul {
  font-size: 70%;
}

<ol>
  <ul>Invalid</ul>
  <li>Larger
    <ul>
      <li>Normal
      </li>
    </ul>
  </li>
</ol>

Answer 4

不确定我是否完全理解你，但是这个呢。

OL LI { font-size: 130%; }
UL LI { font-size: 70%; }