CSS Как стилизовать определенный <li>? - PullRequest
Новая
       13

CSS Как стилизовать определенный <li>?

0 голосов
/ 15 июня 2011

Используя jQuery, я хотел узнать, как я могу стилизовать определенный элемент списка?

Например, я бы хотел стилизовать первый <li> (first-child), чтобы придать ему свой стиль, затем присвоить следующим пяти элементам списка свои собственные стили, а затем следующим пяти своимстили и т. д.

Я давно читал что-то о :nth, но не совсем понял.Это легко достичь?

Ответы [ 2 ]

5 голосов
/ 15 июня 2011

nth-child позволяет вам предоставить выражение, которое оценивается, чтобы дать набор элементов. Самое простое выражение, которое вы можете предоставить, это просто число (например, nth-child(3)), которое будет применять стиль к третьему дочернему элементу.

Вы можете использовать его для применения стилей к каждому третьему дочернему элементу с помощью выражения, например 3n, и даже можете использовать odd или even для применения стилей (очевидно) к каждому нечетному или четному дочернему элементу.

Однако я не думаю, что вы можете использовать его для применения стилей к повторяющимся блокам нескольких элементов (например, стиль 5 элементов в одну сторону, а следующие 5 в другую) с помощью одного выражения.

1 голос
/ 15 июня 2011

Google очень помогает: http://css -tricks.com / how-nth-child-works / 

ul li:nth-child(5) {
  color: #ccc;
}

Или jQuery: http://api.jquery.com/nth-child-selector/

$("ul li:nth-child(5)").css("color", "#ccc");

Для стилей групп LI: 

$(document.body).click(function () {
  $("ul li").each(function (index) {
    // This will get the remainder of the division of the li index by 10
    var groupNum = index % 10;

    // Style groups of 5 LIs differently
    if (groupNum<5) {
      $(this).css("color", "#ccc");
    } else {
      $(this).css("color", "#222");
    } 
  });
});

Не проверено, но оно должно дать вам идею.

...