Вопрос по css – Можно ли настроить таргетинг на самый последний элемент списка в CSS?

7

У меня есть сгенерированное меню страницы, которое по структуре будет похоже на следующий вложенный список:

<code><ul>
    <li>Page 1</li>
    <li>Page 2</li>
    <li>
        Page 3
        <ul>
            <li>Subpage 1</li>
            <li>Subpage 2</li> <!-- Can I target ONLY this element? -->
        </ul>
    </li>
</ul>
</code>

Обратите внимание, что этот список является динамическим.The number of items and number of levels are not predictable, Таким образом, что-то подобное не будет достаточно гибким:

<code>/* I know this does not have great browser support - just an example */
ul > li > ul > li:last-child {
    /* CSS here */
}
</code>

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

Чтобы усложнить задачу, я хотел бы настроить таргетинг на все основные браузеры вместе с IE 7+.

Is it possible to target the very last list item using CSS?

В основном мне это нужноскрипка решено (через @ Pumbaa80).

Кажется, людям трудно понять ваш вопрос. Я поднял JSFiddle, чтобы проиллюстрировать проблему:jsfiddle.net/NaJas user123444555621
@ Pumbaa80 Спасибо. Я отредактирую свой вопрос, чтобы включить эту скрипку. Stephen Watkins

Ваш Ответ

5   ответов
1
& lt;, p & gt; Короче говоря: нет. Ограничения, которые вы даете, делают решения CSS непрактичными из-за (очень) слабой поддержки для "продвинутого CSS"; в IE7.

Будет ли использование JavaScript в вашем случае вариант? С jquery приходит на ум следующее:

$('ul li').last().css('color', 'red');

edit: This will also bypass your 'unknown tree depth' issue as child nodes of the last li would automatically be further down in the list of matching items but child nodes of earlier li items would not :

  • 1st element
  • 2nd element
  • 3rd element
    • 4th element
  • 5th element

изменить: я обновил вашу скрипку здесьhttp://jsfiddle.net/NaJas/4/

6

The CSS3 Way (IE9+)

Если вы точно знаете, насколько глубоко ваш последний элемент, вы можете повторить свои звонки:last-child:

li:last-child li:last-child {
    color: red;
}

Этот селектор псевдокласса не поддерживается в IE до версии 9, согласноhttp://caniuse.com/#search=last-child, Конечно, если вы не знаете, насколько глубоким будет этот элемент списка, тогда этот способ не очень полезен.

The JavaScript Way

Вы также можете настроить таргетинг на самый последний элемент списка с помощью JavaScript:

var items = document.getElementById("mylist").getElementsByTagName("li"),
    _item = items[ items.length - 1 ];

_item.className == "" 
  ? _item.className = "last" 
  : _item.className += " last" ;

Это сырой JavaScript, который не требует дополнительных фреймворков или библиотек. Если вы используете популярный фреймворк, такой как jQuery, это может быть еще проще:

$("#mylist li:last").addClass("last");

Я бы не советовал вам использовать jQueryjust за что-то вроде этого. Необработанный JavaScript будет намного быстрее и гораздо меньше.

The Preprocessor way

В зависимости от того, как построено ваше навигационное меню, вы можете использовать серверный язык, чтобы идентифицировать последний элемент списка и пометить его как таковой. Например, мы могли бы выполнить следующее, используяDOMDocument класс в PHP:

$d = new DOMDocument();
$d->loadHTML( $html );

$a = $d->getElementsByTagName("li");
$l = $a->item( $a->length - 1 );

$c = $l->getAttribute("class");

empty( $c ) 
  ? $l->setAttribute("class", "last") 
  : $l->setAttribute("class", "last $c");

echo $d->saveHTML( $l );

Это находит последний элемент списка в HTML и добавляет новый класс & quot; last & quot; к этому. Преимущество этого состоит в том, что он не требует сложных и часто плохо поддерживаемых селекторов CSS3. Кроме того, для выполнения тривиальных задач не требуется добавления больших библиотек JavaScript.

Извините, я имел в виду, что ваше CSS-решение было недостаточно гибким (я просто не знаю, сколько может быть вложенных уровней - возможно, потребуетсяli:last-child li:last-child li:last-child). Ваши другие решения будут работать (я думаю). Stephen Watkins
Это не будет достаточно гибким. Я обновил свой вопрос, чтобы включить пример Fiddle. Stephen Watkins
@ Стив, я понимаю. Я продолжу свое последнее решение, поскольку оно может повлиять на ваши варианты.
@Steve Вы действительно не должны загружать в библиотеку 37 КБ только для чего-то вроде этого. Приведенные выше решения действительно достаточно гибки, и в настоящее время я работаю над примером предварительной обработки, который будет работать 100% времени.
хороший ответ! очень полные и хорошие варианты.
1

The number of items and number of levels are not predictable.

означает, что селекторов CSS2 и даже селекторов CSS3 недостаточно:

Предположим, у вас есть селектор, который работает для глубины списка 2. Теперь добавление третьего уровня списка в этом элементе должно сделать недействительным этот селектор, то есть селектор должен зависеть от дочерних элементов элемента. Подобные селекторы еще не существуют ибудет введен в CSS4где это будет решением вашей проблемы:

/* CSS4 */
li:last-child:not($li li) {
    /**/
}

Селектор$li li означает "li это имеет некоторыеli Потомок & Quot ;.

5

Вы отправили правильный путь:

li:last-child

Если вам нужно быть уверенным, вы можете использовать javascript / jQuery для этого. Но тогда у вас может возникнуть проблема: "если люди отключили js?" ... ни за что.

использованиеli:last-child.

Редактировать:

Если вы можете добавить хотя бы класс наUL будет легко В противном случае, если вы уверены, что есть только два списка:

ul ul li:last-child { /* code */ }

Другое Править:

http://jsfiddle.net/toroncino/4NXg2/

Двойное решение, JS и CSS.

Изменить еще раз:

Твоя скрипка:http://jsfiddle.net/toroncino/NaJas/1/

$('ul').last().addClass('last');​
ты прочитал вопрос?
@Steve Можете ли вы добавить классы на UL? Я улучшил свой ответ.
Я имел в виду, что мне нужен ТОЛЬКО последний элемент li, а не просто последний элемент li самого внешнего вложенного уровня. С этим в мыслях,li:last-child не работает для меня (jsfiddle.net/h3Zzm). Stephen Watkins
@Steve снова улучшился с помощью jsFiddle.
Конечно, я ответил, что нет никакого способа ... или решения css: last-child или javascript ... нет ничего для старых браузеров или для браузеров с отключенным JavaScript ...
0

Вы можете использовать li: last-child в своем CSS

Похожие вопросы