Выберите внутренний элемент HTML в CSS - PullRequest
Новая
       0

Выберите внутренний элемент HTML в CSS

2 голосов
/ 03 марта 2011

Как я могу использовать селекторы CSS для применения стиля только к внутреннему элементу в списке.Пример:

Фрагмент HTML: 

<ul class="list">
  <li>Item 1</li>
  <li>
    <ul class="list">
      <li>Subitem 1</li>
      <li>Subitem 2</li>
      <li>
        <ul class="list">
          <li>Subitem 1.1</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Фрагмент CSS: 

ul.list {
  border: 1px solid red;
}

Мне нужно иметь рамку only arround "Подпункт 1.1 "строка.Список генерируется, и невозможно добавить дополнительный класс или идентификатор, а так как список не имеет фиксированной глубины, он не может указывать «ul> ul> ul.list» или подобный селектор.

Ответы [ 4 ]

1 голос
/ 03 марта 2011

Я считаю, что вы не можете сделать это только с помощью CSS, если невозможно использовать Id или уникальный класс.В этом случае я думаю, что jQuery - это путь: 

$("li").children().eq( $("li").children().length - 1 ).
  css('border', '1px solid red');

Идея состоит в том, чтобы использовать eq(), чтобы точно определить самого глубокого ребенка.

Надеюсь, это поможет

1 голос
/ 03 марта 2011

нельзя указывать "ul> ul> ul.list" или подобный селектор.

Почему бы и нет? Это, или добавление класса, является решением.

Вы в основном указали требование для идентификации элемента, а затем отклонили все подходы, которые вы могли бы использовать для этого.

0 голосов
/ 03 марта 2011

JoseSantos прав в том, что это невозможно сделать с помощью чистого CSS.Вот как я это сделаю в jQuery: 

$("ul").each(function(){
    if ($(this).find("ul").length == 0)
        $(this).addClass("list");
});
0 голосов
/ 03 марта 2011 
<html>
<head>
<style type="text/css">
li.list {
  border: 1px solid red;
}

</style>
</head>

<body>
<ul >
  <li>Item 1</li>
  <li>
    <ul >
      <li>Subitem 1</li>
      <li>Subitem 2</li>
      <li>
        <ul >
          <li class="list">Subitem 1.1</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

</body>
</html>

Надеюсь, это поможет тебе ..

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...