Question

我在不同的页面中有这些结构：

<!-- case one -->
<ul class="lang-inline">
    <li class="lang-active" dir="ltr">...</li>
    <li class="" dir="ltr">...</li> 
    ...
</ul>

<!-- case two -->
<ul class="lang-inline">
    <li class="" dir="ltr">...</li>
    <li class="lang-active" dir="ltr">...</li>
    ...
</ul>

在每个页面中，每个ul中都有一个.lang-active类li。我想要做的是为每个案例分配不同的风格。

由于它是一个模板，我应该在一个css文件中编写样式。

CSS中有没有办法做到这一点？

Answer 1

是的，您可以使用nth-child伪造选择器，如下所示：

.lang-inline:first-child .lang-active {
     //add your styles here for the first-case
}

.lang-inline:nth-child(2) .lang-active {
     //add your styles here for the second-case
}

.lang-inline:first-child .lang-active {
  color: blue;
}

.lang-inline:nth-child(2) .lang-active {
  color: red;
}

<!-- case one -->
<ul class="lang-inline">
    <li class="lang-active" dir="ltr">One</li>
    <li class="" dir="ltr">Two</li> 
    ...
</ul>

<!-- case two -->
<ul class="lang-inline">
    <li class="" dir="ltr">Three</li>
    <li class="lang-active" dir="ltr">Four</li>
    ...
</ul>

Answer 2

您可以使用+选择器CSS2：

.just-for-markup + .lang-inline .lang-active {
  background: red;
}

.just-for-markup + .lang-inline  + .lang-inline .lang-active {
  background: blue;
}

<div class="just-for-markup"></div>

<!-- case one -->
<ul class="lang-inline">
    <li class="lang-active" dir="ltr">...</li>
    <li class="" dir="ltr">...</li> 
</ul>

<!-- case two -->
<ul class="lang-inline">
    <li class="" dir="ltr">...</li>
    <li class="lang-active" dir="ltr">...</li>
</ul>

Answer 3

我认为他的意思是改变每页的风格。

在这种情况下，你需要使用一些“标记”识别页面，要么是祖先的id，要么是在元素本身上添加的动态类/ id。

css比将

ul.lang-inline > .lang-active {
  background: red;
}

#page2 ul.lang-inline > .lang-active {
  background: blue;
}

这里是示例http://jsfiddle.net/egpksme0/1/

使用类为不同的子项分配不同的CSS

3 个答案: