Можно ли проверить вычисленные стили для псевдоэлементов ::after и ::before?

Chrome показывает мне определения ::after и ::before (а также унаследованные определения и т. д.) на панели Соответствующие правила CSS, когда я проверяю элемент. Но панель Вычисляемые стили отображает только вычисленные стили для корневого элемента.

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

Если кто-нибудь может пролить свет на это, это будет чрезвычайно полезно.

Изменить – 13 февраля 2014 г.

В последних версиях Chrome действительно есть эта встроенная функция. Возможно, эта небольшая ветка как-то связана с ними, включая ее ?? :-)


google-chrome css pseudo-element
person techfoobar    schedule 16.12.2012    source источник

Ответы (2)


arrow_upward
3
arrow_downward

window.getComputedStyle( element[, pseudoElt] )

pseudoElt Дополнительно

Строка, определяющая псевдоэлемент для сопоставления. Должен быть опущен (или равен нулю) для обычных элементов. Псевдоклассы могут быть указаны как :focus.

Возможно, я неправильно понимаю, чего вы пытаетесь достичь, но вот немного JavaScript, с которым можно поиграть. Я надеюсь, что это полезно.

Он перебирает каждый элемент в документе и пытается получить content из своих :before и :after.
Если он находит что-либо, он выводит подробности в console.
Просто, но наглядно.

document.querySelectorAll( "*" ).forEach( ( e ) => {
  const ebc = window.getComputedStyle( e, ":before" ).content,
        eac = window.getComputedStyle( e, ":after" ).content;
  if ( ebc || eac ) {
    console.log( e );
    console.log( ( ebc ? "Before content = " + ebc : "No :before content" ) );
    console.log( ( eac ? "After content = " + eac : "No :after content" ) );
  }
} );
div:before {
  content: "This is a test.";
}
p:after {
  content: attr( data-content );
}
span:after {
  content: " dolor";
}
<div>
  <p data-content="&hellip;">Lorem <span>ipsum</span></p>
</div>

person Fred Gandt    schedule 20.12.2012

arrow_upward
1
arrow_downward

Да, хотя не все так очевидно. Если вы используете Firebug, вам необходимо убедиться, что на раскрывающейся вкладке стилей выбрано «Показывать только применяемые стили». Затем, как вы можете видеть на снимке экрана ниже, вы должны иметь возможность выбирать псевдоэлементы и просматривать их вычисленные стили (или применяемые стили), которые учитывают любые переопределения и т. д.

Вычисленные стили

person jezzipin    schedule 17.12.2012
comment
Только что понял, что вы используете Chrome, поэтому ответ, вероятно, нет. - person jezzipin; 17.12.2012
comment
Пользуюсь обоими браузерами, хотя больше пользуюсь хромом. Проблема в том, что я не могу «выбрать» псевдоэлемент в браузере, поскольку он не является частью DOM [и, следовательно, не может быть передан в качестве аргумента для getComputedStyle()]. Я могу выбрать только корневой элемент, к которому я прикрепил псевдоэлементы. В любом случае, спасибо за указатель. - person techfoobar; 17.12.2012