Существует ли CSS-селектор, который выбирает dt и связанные с ним элементы dd?

StackOverflow https://stackoverflow.com/questions/1429483

  •  07-07-2019
  •  | 
  •  

Вопрос

Списки определений - отличный способ разметить информацию, в которой какое-либо ключевое слово связано с одним или несколькими значениями.

Поскольку существует семантическая ассоциация dt с один или несколько элементы dd, есть ли способ использовать CSS для выбора этих связанных элементов?

Рассмотрим следующий html-код:

<dl>
  <dt>Foo</dt><dd>foo</dd>
  <dt>Bar</dt><dd>bar</dd>
  <dt>Baz</dt><dd>baz</dd>
</dl>

Если я хочу представить этот dl как:

-------  -------  -------
| Foo |  | Bar |  | Baz |
| foo |  | bar |  | baz |
-------  -------  -------

Мне нужен способ сказать, что пара dt / dd номер один плавает влево, получить границу и так далее.

Прямо сейчас единственный известный мне способ сделать это - создать отдельные dls для каждого набора элементов dt / dd:

<dl>
  <dt>Foo</dt><dd>foo</dd>
</dl>
<dl>
  <dt>Bar</dt><dd>bar</dd>
</dl>
<dl>
  <dt>Baz</dt><dd>baz</dd>
</dl>

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

Итак, есть ли селектор или комбинация селекторов, которые позволят мне работать с группами элементов dt / dd?

Обновить

То, что я ищу / предлагаю, - это что-то вроде псевдоэлемента list-item, где dl:элемент списка выбрал бы dt и все связанные с этим dd элементы как один элемент, во многом таким же образом, как first-line псевдоэлемент позволяет выделить группу символов как единое целое.

Это было полезно?

Решение 2

Это в ответ на ответ найттла.В комментарии нет места или возможности адекватно ответить на ответ найттла, и этот ответ не является частью вопроса, поскольку он адресует ответ на вопрос.Итак, я продолжу и опубликую это в качестве ответа.

книттл говорит, что то, что я ищу, невозможно.Я подозревал, что так оно и есть, но я мог что-то упустить, читая различные стандарты.

Однако приведенная причина явно неверна.

книттл утверждает:

нет, этого не происходит, потому что <dt> может иметь несколько <dd>s и наоборот круглый.

Если бы он остановился на "нет, такого не существует", это был бы правильный ответ.

Итак, утверждение состоит в том, что это невозможно, поскольку у нас есть неопределенное количество элементов в предлагаемой группировке.

Это утверждение может быть опровергнуто непосредственно путем предоставления алгоритма для создания набора связанных элементов для любого набора элементов dt и dd, которые являются дочерними элементами dl.Кроме того, это может быть опровергнуто встречным примером существующего псевдоэлемента, который работает над неопределенной частью документа.

Логика реализации псевдоэлемента, группирующего связанные элементы dt и dd, несложна.Таким образом, количество элементов любого типа не имеет значения.

Для данного элемента DL:

  • Укажите тип коллекции, которая будет содержать dt и dd элементы, называемые dt_dd_group
  • Начните собирать dt_dd_groupвызываемый all_groups
  • Проверьте каждый дочерний элемент (нерекурсивный):
    • Если элемент является dt:
      • Если это первый элемент или предыдущий элемент не был dt:
        • Создайте новый dt_dd_group
        • Добавьте новый dt_dd_group Для all_groups
        • Добавьте элемент к dt_dd_group
      • Иначе добавьте элемент к текущему dt_dd_group
    • Иначе, если элемент является dd:
      • Если это первый элемент:
        • Создайте новый dt_dd_group
        • Добавьте новый dt_dd_group Для all_groups
        • Добавьте элемент к dt_dd_group
      • Добавьте элемент к текущему dt_dd_group
  • Возвратная коллекция all_groups

Этот алгоритм легко разбивает набор элементов dt / dd внутри dl на связанные наборы.Для любого легального dl, включая совместимый, но патологический случай, когда исходные элементы dt не предусмотрены:

<dl><dd>foo</dd><dd>bar</dd><dl>

Утверждение о том, что этот способ выбора невозможен из-за неопределенного количества элементов dt или dd в такой группе, является ложным.Количество букв в первой строке абзаца также не определено, однако :first-line псевдоэлемент является частью стандартов CSS.

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

Итак, подводя итог, в то время как селектор, работающий с группой семантически связанных тегов dt и dd, теоретически возможен, такой селектор не был реализован.

Другие советы

нет, этого не происходит, потому что <dt> может иметь несколько <dd>s и наоборот.

но, может быть:

dt + dd {  }

в вашем случае этого достаточно

Как насчет использования идентификатора в сочетании с общим комбинатором-братом?

    <html>
    <head>
          <style type="text/css">
                #id1 ~ DD { color: red; }
                #id2 ~ DD { color: blue; }
          </style>
    </head>
    <body>
        <dl>
        <dt id="id1">term 1</dt>
            <dd>def 1a</dd>
            <dd>def 1b</dd>

        <dt id="id2">term 2</dt>
            <dd>def 2a</dd>
            <dd>def 2b</dd>
        </dl>
    </body>
</html>​​​​​​​​​​​​​​​

Посмотрите на эту скрипку, кажется, она делает то, что вы хотите ... http://jsfiddle.net/6qEHQ/

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top