Question

我需要知道如何使用CSS选择<li>Iquitos Peru</li>标记，我已经阅读了＆＃34; nth-child＆＃34;但我不明白。我有以下示例代码。

<ul id="pais">
    <h1>Perú</h1>
    <li class="departamento">
        <ul>
            <h2>Lima</h2>
            <li class="provincia">
                <h3>Lima</h3>
                <ul>
                    <li><strong>Ciudades:</strong></li>
                    <li>Ancon</li>
                    <li>Comas</li>
                    <li>Los Olivos</li>
                    <li>La Molina</li>
                    <li>Chorrillos</li>
                    <li><input type="text" class="eleccion"></li>
                </ul>
            </li>
        </ul>
    </li>
    <li class="departamento">
        <ul>
            <h2>Loreto</h2>
            <li class="provincia">
                <h3>Iquitos Ciudad</h3>
                <ul>
                    <li><strong>Ciudades:</strong></li>
                    <li>Iquitos Perú</li> <-- I need format this ######
                    <li>Nauta</li>
                    <li>Belén</li>
                    <li>Punchana</li>
                    <li><input type="text" class="eleccion"></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
<input type="button" value="Enviar" class="btnEnviar" (click)="alert()">

我找到了这个例子，但我不知道如何将它应用到我的案例中。在这个例子中，只使用了div，我有<ul> I find this，但很难理解。非常感谢你。

Answer 1

如果你知道订单不会改变

，一种方法是选择它

#pais .departamento:last-child .provincia li:nth-child(2) {
  color: red;
}

或同时使用第n个子选择器

#pais .departamento:nth-child(3) .provincia li:nth-child(2) {
  color: red;
}

Answer 2

无法使用CSS选择内容。因此为选择器的li添加了一个value属性。

或者，如果您使用的是jquery，则可以使用contains选择器

li[value='Iquitos Per'] {
 background-color:red
}

<ul id="pais">
    <h1>Perú</h1>
    <li class="departamento">
        <ul>
            <h2>Lima</h2>
            <li class="provincia">
                <h3>Lima</h3>
                <ul>
                    <li><strong>Ciudades:</strong></li>
                    <li>Ancon</li>
                    <li>Comas</li>
                    <li>Los Olivos</li>
                    <li>La Molina</li>
                    <li>Chorrillos</li>
                    <li><input type="text" class="eleccion"></li>
                </ul>
            </li>
        </ul>
    </li>
    <li class="departamento">
        <ul>
            <h2>Loreto</h2>
            <li class="provincia">
                <h3>Iquitos Ciudad</h3>
                <ul>
                    <li><strong>Ciudades:</strong></li>
                    <li value="Iquitos Per">Iquitos Perú</li> 
                    <li>Nauta</li>
                    <li>Belén</li>
                    <li>Punchana</li>
                    <li><input type="text" class="eleccion"></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
<input type="button" value="Enviar" class="btnEnviar" (click)="alert()">

Answer 3

您可以为<li>提供ID或类。否则，您可以使用选择器，请参阅：Nested classes selectors

CSS：如何选择特定的sibiling元素

3 个答案: