对 ul 标签进行分类 [关闭]答案

【问题标题】：Classifying the ul tag [closed]对 ul 标签进行分类 [关闭]
【发布时间】：2023-01-15 23:57:38
【问题描述】：

我想在我的 WordPress 站点中使用这样的结构：

HTML:

<div class="main_txt">

<ul>
    <li>
       <h2>text 1</h2>
    </li>

    <li>
        <h2>text 2</h2>
    </li>

    <li>
        <h2>text 3</h2>
    </li>

    <li>
        <h2>text 4</h2>
    </li>
</ul>

</div>

调用 ul li 标签并设置样式如下：

 .main_txt ul li h2{
        color: #c00579;
    }

    .main_txt ul li > li h2{
        color: #ff0000;
    }

    .main_txt ul li > li > li h2{
        color: #1eff00;
    }

    .main_txt ul li > li > li > li h2{
        color: #1900ff;
    }

但是只执行了第一个样式，其他样式没有效果。

有没有办法在不上课的情况下设置 ul li 标签的样式？

【问题讨论】：

其他样式没有效果，因为它们的选择器不匹配。第二个匹配所有h2元素，这些元素是li元素的后代，而li元素是其他li元素的直接子元素。并且 HTML 中没有这样的元素。
顺便说一句，li 不能是另一个li 的直接子代；它必须是另一个元素的子元素，例如 ul 或 ol。

标签： html css

【解决方案1】：

.main_txt ul li h2 {} 选择所有li 中的所有h2 元素。

.main_txt ul li > li h2{选择所有li中所有li中的所有h2元素。

.main_txt ul li > li > li h2{ 选择所有li 中所有li 中所有li 中的所有h2 元素。

等等。您并没有真正选择第一个、第二个或第三个h2。如果那是你需要做的，你可以使用:nth_child。例如：

.main_txt ul li:nth-child(2) h2{选择第二个li中的h2。

【讨论】：