Можно ли связать: not () затем: last-child?

Question

Мне нужно стилизовать (только CSS) последний дочерний элемент, исключая элементы с определенным классом.

Например, я хочу стилизовать

<ul>
  <li>Bar</li>
  <li>Bar</li>
  <li>Bar</li>
  <li>Should have a green background</li>
  <li class='foo'>Bar</li>
</ul>

Последний li без класса'Foo' должен быть зеленым.Я пытался

li:not(.foo):last-child {
    background-color: green;
}​

или

li:not(.foo):last-of-type {
    background-color: green;
}​

, но это не работает.

См. http://jsfiddle.net/gentooboontoo/V7rab/2/

Answer 1

Ответ на ваш вопрос Можно ли связать :not(), тогда :last-child? (или, проще говоря, можно ли связать псевдоклассы? ) оченьда.Но, как отмечали другие, если li:last-child имеет id="foo", то ничего не будет выбрано.В качестве демонстрации, подобное выражение

li:not(.bar):last-child {
    background-color: green;
}​

работает просто отлично.Проблема состоит в том, что все последовательные селекторы применяются ко всему контексту, а не к подмножеству, указанному в предыдущих выражениях, поэтому li:not(.foo):last-child идентичен li:last-child:not(.foo), что явно не то, что требуется.

Answer 2

Не думаю, что это сработает (это не сработает, но я не думаю, что должно работать в любом случае)

Селектор работает, но второй-последний li никогда не будет :last-child, потому что это не последний ребенок ...

Это не похоже на метод not() в jQuery, который фактически удаляет указанный элемент из выделения. Селектор / фильтр CSS :not будет игнорировать элемент, но не удалит его со страницы

Answer 3

Внутри любого элемента есть только один последний дочерний элемент.В вашем примере это <li class='foo'>Bar</li>.Если у вас есть точное число детей, вы можете использовать комбинатор соседних братьев и сестер:

LI:first-child + LI  + LI + LI  {/* here are declarations for 4th LI. */}

Answer 4

Применение 'last-child' вызовет проблему с браузером.поэтому я попробовал в Jquery.

Если вам нужно использовать этот код.

var a = 0
$('ul li').each(function() {
   $(this).attr("id",a);
    a++; 
});
var b = a-1;
$('#'+b).attr('style','background-color:green');​