Как остановить таблицы стилей пользовательских агентов от переопределения моего css

Я пытаюсь установить курсор: указатель на элемент dom, но вход не принимает его (я не вижу курсор указателя, когда я наводил флажок). В chrome я вижу, что "таблица стилей пользовательского агента" переопределяет мой css. Wtf?

<!doctype html>
<body>
    <div class='a'>
        <input type='checkbox'>
    </div>

    <style>
        .a {
            cursor: pointer;
        }
    </style>
</body>

Я видел этот вопрос: Почему таблица стилей агента пользователя переопределяет мои стили? Но моя проблема, похоже, не является doctype, которая рекомендуемый тип документа.

Использование !important здесь неприемлемо, и ни один из них не встраивает вход node напрямую - мне не нужно беспокоиться о стильных стилях пользовательского браузера. Что происходит?

Чтобы уточнить, мой вопрос заключается в том, почему таблица стилей пользовательского агента переопределяет css и как сделать эту остановку. Мой вопрос заключается не в том, как я могу взломать это поведение. Если я не ошибаюсь, правильное поведение css заключается в том, что стиль курсора должен быть унаследован дочерними узлами.

Является ли это ожидаемым поведением css?

Ответы

Ответ 1

"Проблема" заключается в том, что в стиле стилей автора нет стиля input (см. спецификацию для получения дополнительной информации), и поэтому используется стиль, определенный в таблице стилей пользовательского агента.

Правило пользовательского агента (на хроме):

input, input[type="password"], input[type="search"] {
   cursor: auto;
}

Вы можете достичь того, чего хотите, несколькими способами:

  • Создайте класс css, который выбирает вход непосредственно, например
    • с использованием другого класса css или
    • выбор ввода в уже определенном классе,
    • и т.д.
  • Явное определение поведения наследования для стиля курсора на всех входах

Для (1):

<style>
  .a, .a input {
      cursor: pointer;
  }
</style>

Для (2):

<style>
  input {
      cursor: inherit;
  }
  .a {
      cursor: pointer;
  }
</style>

Ответ 2

Кажется, что это может быть просто css, являющийся css, что является неудачным. Самое общее обходное решение, которое я могу придумать, - это определить этот css:

<style>
  input {
    cursor: inherit;    
  }
</style>

Это позволяет предполагать, что изначально ожидалось, что пользовательский агент в противном случае заставляет стиль не наследовать. Это лучше, чем стиль ввода с помощью "cursor: pointer" напрямую, потому что вам нужно только один раз установить этот стиль, и любые domNodes с стилем "курсор: указатель", содержащие вход, автоматически будут иметь указатель курсора.

Ответ 3

Я думал, что у меня есть эта проблема, и проверил обычных подозреваемых, Doctype и т.д. Как это ни смешно, оказалось, что стиль, который, как я думал, применялся, был прокомментирован в CSS. Тем не менее, Chrome показывал стиль, как если бы он был фактическим стилем и был переопределен.

Ответ 4

Отвечая на этот вопрос в целом с выработкой объяснения, я бы сказал, конечным значением свойства css является четырехэтапный расчет (т.е. спецификация, вычисляемая, используемая и фактическая) в соответствии с это сообщение.

В спецификации Каскадирование имеет приоритет над наследованием.

Так как у вас нет какого-либо свойства css ввода, поэтому таблица стилей пользовательского агента, применяемая к вводу, имеет приоритет над унаследованным значением из класса a. Чтобы использовать унаследованное значение, вы должны переопределить код, предложенный @B T. то есть.

<style>
  input {
    cursor: inherit;    
  }
</style>

Объяснение каскадирования:

Краткое объяснение
Подробное объяснение

Я имею в виду подробное объяснение здесь -
Существует три основных понятия, которые управляют порядком, в котором применяются объявления CSS:

  • Значение
  • Специфичность
  • Порядок источника

Значение объявления CSS зависит от того, где он указан. Конфликтующие заявления будут применяться в следующем порядке; более поздние будут отменять предыдущие:

  • Таблицы стилей пользовательских агентов
  • Нормальные объявления в таблицах стилей пользователя
  • Нормальные объявления в стилях стилей автора
  • Важные объявления в стилях стилей автора
  • Важные объявления в таблицах стилей пользователя

Специфика и порядок источника не имеют отношения к этому вопросу, вы можете ссылаться на ссылки для объяснения того же

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

В коротком наследовании < каскадирование < значение < таблица стилей пользователя это приоритет в вашем случае.