Блог

Главная - Вопросы по программированию - Проблема при использовании атрибута заголовка в элементе стиля

Проблема при использовании атрибута заголовка в элементе стиля

#javascript #html #css

Вопрос:

Недавно я столкнулся с очень странной проблемой. При добавлении более одного элемента стиля и при добавлении атрибута заголовка к элементу стиля с другим значением, присвоенным в заголовке. Применяется только первый элемент стиля css.

  <!doctype html>
    <html>
      <head>
        <link rel="stylesheet" href="lib/style.css">
        <script src="lib/script.js"></script>

        <style title="Id-1">
          h1{color:red}
        </style>

        <style title="Id-2">
          h2{color:blue}
        </style>

      </head>

      <body>
        <h1>Hello Red Heading!</h1>
        <h2>Hello Blue Heading!</h2>
      </body>
    </html>

Теперь, если вы видите выше простой HTML-код. Ниже приведены возможности работы этого кода-

  1. Когда атрибут заголовка не добавлен — он работает.
  2. Когда атрибут заголовка добавляется с тем же значением или без значения — это работает.
  3. Когда мы присваиваем другое значение в атрибуте заголовка, как показано в коде, применяется только первый элемент стиля css, т. е. h1 становится красным, но не влияет на h2.

Решение состоит в том, чтобы использовать данные — пометить заголовок как пользовательский атрибут или атрибут данных. Мне больше интересно узнать, в чем причина такого поведения.

Чтобы увидеть это в действии, я создал планкр, который вы можете посетить здесь

Комментарии:

1. почему это должно быть разделено таким образом?

2. @AdityaDees Отдельные файлы стилей? Динамическое тематическое приложение? И Т.д.?

3. как выглядит файл style.css?

Ответ №1:

Это потому title , что on <style> используется для предоставления различных подмножеств стилей. Документация

Так что в основном идя к View > Page Style вам, вы увидите id-1 и id-2 :

введите описание изображения здесь

Из документации:

Любая таблица стилей в документе относится к одной из следующих категорий:

Постоянный (нет rel="alternate" , нет title="" ): всегда применяется к документу. Предпочтительно (нет rel="alternate" , с title="..." указанием): применяется по умолчанию, но отключено, если выбрана альтернативная таблица стилей. Может быть только одна предпочтительная таблица стилей, поэтому предоставление таблиц стилей с различными атрибутами заголовка приведет к тому, что некоторые из них будут проигнорированы.
Альтернативный ( rel="alternate stylesheet" , title="..." должен быть указан): по умолчанию отключен, может быть выбран.

Метки: