Невозможно удалить тень на посещенной ссылке - применяется дважды

Не уверен, если это просто связано с :visited ссылки или обычная стилизация с box-shadow, но я не могу переопределить его.

https://jsfiddle.net/pt39v1yy/1/

Первоначально я пытался изменить цвет тени коробки, но потом понял, что это не переопределяет вещь, поэтому я тоже попытался удалить и все еще ничего. Я пытался добавить! Важный, неустановленный, начальный и т. Д., Но проверка всегда показывает, что оригинальная тень от коробки не перечеркнута, как будто ее нельзя переопределить.

a:not(.btn) {
    text-decoration: none;
    border-bottom: 3px solid #b4e7f8;
    box-shadow: inset 0 -4px 0 #b4e7f8;
    -webkit-transition: background .35s cubic-bezier(.33,.66,.66,1);
    transition: background .35s cubic-bezier(.33,.66,.66,1);
    color: inherit;
}
a:not(.btn):hover{
    background: #b4e7f8;
    text-decoration: none;
}
 a:not(.btn):visited {
    border-bottom: 3px solid #beb4f8;
  background: #beb4f8;
  -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    color: inherit;
}

1 ответ

Helloo,

Согласно MDN: Вы можете применять только определенные свойства к :visited Селектор в CSS, и box-shadow не является одним из них.

Примечание. Из соображений конфиденциальности браузеры строго ограничивают стили, которые можно применять с помощью элемента, выбранного этим псевдоклассом: только цвет, цвет фона, цвет границы, цвет рамки снизу, цвет рамки слева, цвет справа -краска, цвет рамки, цвет контура, цвет правила столбца, заливка и обводка. Также обратите внимание, что альфа-компонент будет игнорироваться: вместо него используется альфа-компонент правила "не посещен" (за исключением случаев, когда непрозрачность равна 0, в этом случае весь цвет игнорируется, а используется один из правил "не посещаемых").).

Для получения дополнительной информации о текущих ограничениях взгляните на: Конфиденциальность и селектор: посещения.

Может быть, вы могли бы сделать что-то подобное, если вы действительно хотите иметь box-shadow: https://jsfiddle.net/pt39v1yy/2/

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

Другие вопросы по тегам