Как изменить стиль CSS первой буквы при наведении на родительский элемент?

Question

Вероятно, это то, что я просто тупо пропускаю, но не могли бы вы сказать, почему при наведении курсора на второй элемент деления цвет фона первой буквы не меняется на rgb (50,50,50) от rgb? (150,150,150)?

Наведение над первым делением, которое начинается без стилизации на первой букве, реагирует на изменения стиля при наведении. Но второе разделение, которое начинается с тех же стилей, которые отображаются при наведении курсора, не меняется на более темный фон при наведении.

Я использую последнюю версию Firefox Developer Edition. Теперь я вижу, что это работает в Chrome; так должно быть Firefox проблема.

Спасибо.

div > p:before { content: 'This text.'; }

div:nth-child(2) > p::first-letter,
div:first-child:hover > p::first-letter
{
 float: left;
 padding: 0.5rem;
 background-color: rgb(150,150,150);
}

div:nth-child(2):hover > p::first-letter
{
 background-color: rgb(50,50,50);
}

<div><p></p></div>

<div><p></p></div>

Этот фрагмент работает в Firefox. Похоже, что для того, чтобы стиль ::first-letter был стилизован как без, так и с :hover, необходимо найти букву, кроме содержимого, добавляемого :before или :after.

div > p:after { content: 'his text.' }

div > p::first-letter
 {
   float: left;
   padding: 0.5rem;
   background-color: rgb(150,150,150);
  }
  
div:hover > p::first-letter
 {
  background-color: rgb(70,70,70);
  color: white;
 }

<div><p>T</p></div>

Я применил решение @Sydney Y к приведенному выше фрагменту, чтобы показать, что оно работает в Firefox. Я не думаю, что это проблема того, что :hover не был распознан, потому что приведенный выше фрагмент распознает его. Похоже, проблема заключается в том, что текст, добавленный через :before { content: ... }, не включается, так что есть первая буква, к которой применяется стиль. Но добавление контента на :hover с использованием :after, кажется, меняет это и работает с переменным контентом.

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

div > p:before { content: 'This text.' }

div > p::first-letter
 {
   float: left;
   padding: 0.5rem;
   background-color: rgb(150,150,150);
  }
  
div:hover > p::first-letter
 {
  background-color: rgb(70,70,70);
  color: white;
 }
 
 div:hover > p:after { content: ''; }

<div><p></p></div>

Answer 1

Да, просто некоторые ошибки, ваши методы доступа правильные. Каждый блок CSS должен применяться к обоим элементам:

  div > p:before { content: 'This text.'; }

div> p::first-letter {
  padding: 0.5rem;
  background: red;
 }

div:hover> p::first-letter{
 background: black;
}

div:hover > p:after { content: ''; }

Спасибо за фрагмент, это круто!

Редактировать: приближаться! Код обновлен. Все еще пытаюсь набрать Firefox.

Редактировать: Решено, отчасти. Это работает, но это своего рода хак. Проблема: в Firefox наведение не вызывает перерисовку в этом конкретном экземпляре, поэтому я добавил пустой указатель содержимого при наведении, потому что: after или content, похоже, имеют вид зацепки. Вы можете достичь того же самого с другим взломом, отличным от контента.

Но хорошая новость заключается в том, что это работает как в Chrome, так и в Firefox.

Удивительно проблема. Я не могу представить, чтобы когда-либо сталкивался с этой проблемой снова, но было очень интересно устранять неисправности.

Answer 2

В firefox есть ошибка, что nth-child () не будет работать с синтаксисом, поэтому он не работает. В любом случае, если вы не хотите использовать ту же функциональность, что и первая, с другим цветом, это можно сделать, просто поставив hover перед этим кодом "div: nth-child (2)> p :: first-letter, div: first- child: hover> p :: first-letter ". Я надеюсь, это поможет. https://developer.mozilla.org/en-US/docs/Web/CSS/: п-й ребенок