分配不同孩子的不同的CSS與

類

<!-- 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活性類裏。我想要做的是在每種情況下分配不同的風格。

由於它是一個模板，我應該在一個CSS文件中編寫樣式。

在CSS中有沒有什麼辦法可以做到這一點？

來源

2014-10-18 Tsuneo

是的，你可以使用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>

來源

2014-10-18 12:55:22

1的CSS。另外，根據作者想要的結果，可以使用not（：first-child）和其他組合。 – 2014-10-18 12:57:51

+1。另請注意，如果您需要支持IE，那麼可以使用9+ http://caniuse.com/#search=nth支持'nnth-child'，這在IE8中不起作用。 – CodingWithSpike 2014-10-18 13:00:11

對不起，我的問題不完整。我在不同的頁面上有案例。這個解決方案總是發現第一個lang-active類，因此它不適合我的需求。 – Tsuneo 2014-10-18 13:20:24

您可以使用+選擇是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>

來源

2014-10-18 12:58:52 dashtinejad

我認爲他的意思是改變每頁的風格。

在這種情況下，您需要使用某個「標記」來識別該頁面，無論是祖先的ID還是添加到元素本身的動態類/ id。

比會像

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

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

在這裏，例如http://jsfiddle.net/egpksme0/1/

來源

2014-10-18 13:41:34 user3632735

分配不同孩子的不同的CSS與

回答

相關問題