CSS3沒有選擇最後一個孩子

我有以下的CSS需要改變最後一個孩子沒有類「myClass」，但我似乎無法讓它的工作。CSS3沒有選擇最後一個孩子

任何想法我錯了嗎？根據要求

ul li:not(.myClass):last-child a { 
    font-style:italic; 
}

HTML示例：

<ul> 
    <li><a href="#">one</a></li> 
    <li><a href="#">two</a></li> 
    <li><a href="#">three</a></li> 
    <li class="myClass"><a href="#">Extra</a></li> 
</ul>

我想的CSS應用到李三...

來源

2012-09-19 Tom

也許放棄的HTML代碼很短的例子來匹配和你想要的結果。 – Sirko

您是否嘗試以其他方式添加僞類？ 'ul li：last-child：not（.myClass）a'？ – Mat

@Mat試過......仍然沒有快樂 - 雖然似乎正在研究最後孩子而不是（.myClass）必須是真的理論 – Tom

這不能用CSS做只有當你能夠使用jQuery你可能會發現這個解決方案有幫助。

http://jsfiddle.net/6ku3Y/

$('ul li').not('.myClass').last().find('a').addClass('mystyle');

來源

2012-09-19 09:39:22 Gustonez

儘可能避免jquery，但我認爲在這種情況下，這將是最好的方式。 – Tom

如果你想的CSS僅適用於李三，嘗試：n-child（3）

ul li:nth-child(3) a { 
    border-right:0 
}

http://jsfiddle.net/hhncn/

此僞類根據子元素的父元素的子元素列表中的位置匹配元素。 - http://reference.sitepoint.com/css/pseudoclass-nthchild

來源

2012-09-19 09:16:07 gearsdigital

當然這會起作用，但麻煩在於每個頁面上列表項目的數量不會相同，並且爲每個頁面編寫新的CSS實際上不應該是必須的 - 再加上「.myClass」元素將不會出現在每一頁上。 – Tom

如果你確定你要定位的元素是倒數第二個，你可以使用nth-last-child(2)

ul li:nth-last-child(2) a { 
    border-right:0px solid #000; 
}

來源

2012-09-19 09:20:34 Giona

我不能總是確定它將是最後一個，但有時候「.myClass」不會存在......否則這將是完美的！ – Tom

嘗試是這樣的：

ul li:not(.myClass):nth-last-of-type(2) a { 
    border-right:0px solid #000; 
}

SEE DEMO

來源

2012-09-19 09:23:20

當前的CSS語法不能提供幫助n AND運營商執行這種風格。你需要的是CSS LESS框架。

這將允許你這樣做：

ul > li:not(.myClass) { 
    li:last-child { 
    //style here 
    } 
}

來源

2012-09-19 09:33:57

CSS3沒有選擇最後一個孩子

回答

相關問題