Question

<li class="submenu"><a href="#">mysite</a>
<ul class="level2">(apply different style to this one)
<li><a href="#">toys</a></li>
<li><a href="#">cars</a></li>
<li><a href="#">trucks</a></li>
<li><a href="#">wagons</a></li>
</ul>
</li>

<li class="submenu"><a href="#">cooks</a>
<ul class="level2">
<li><a href="#">toys3a</a></li>
<li><a href="#">cars4b</a></li>
<li><a href="#">trucks34d</a></li>
<li><a href="#">wagonsse</a></li>
</ul>
</li>

<li class="submenu"><a href="#">campers</a>
<ul class="level2">(apply different style to this one)
<li><a href="#">toyssx</a></li>
<li><a href="#">cars12e</a></li>
<li><a href="#">trucks234s</a></li>
<li><a href="#">wagonssxzq</a></li>
</ul>
</li>

上面的无序列表是由类别生成器（php脚本）生成的，并导致下拉菜单，类名称无法更改，我想使用css将不同的样式应用于ul，目前我的样式适用于所有人。有没有办法做到这一点？

Answer 1

您应该使用:nth-child。例如，要将CSS应用于第三个.level2：

.submenu:nth-child(3) .level2 {
    color: red
}

:nth-child适用于IE9 +和所有现代浏览器。如果您需要它，例如，旧版本的IE，那么您将不得不使用JavaScript / jQuery和/或selectivizr。

Answer 2

我理解你的问题是如何在不改变类名的情况下选择CSS样式表上的元素。您可以通过使用多个类名或使用ID来实现此目的。

几乎所有浏览器都支持多个类名;甚至IE6虽然有一些警告（http://www.quirksmode.org/css/contents.html）。

示例：

...
<ul class="level2 custom-style-1">(apply different style to this one)
    <li><a href="#">toys</a></li>
    <li><a href="#">cars</a></li>
    <li><a href="#">trucks</a></li>
    <li><a href="#">wagons</a></li>
</ul>

<li class="submenu"><a href="#">cooks</a>
<ul class="level2 custom-style-2">
...

或者您可以使用ID

...
<ul id="custom-style-1" class="level2">(apply different style to this one)
    <li><a href="#">toys</a></li>
    <li><a href="#">cars</a></li>
    <li><a href="#">trucks</a></li>
    <li><a href="#">wagons</a></li>
</ul>

<li class="submenu"><a href="#">cooks</a>
<ul id="custom-style-2" class="level2">
...

css包含5个具有相同类名的无序列表的样式，为每个类应用不同的样式

2 个答案: