У чому різниця між: before та

79

Я щойно побачив код CSS, який включав ::beforeтег. Я подивився MDN, щоб побачити, що це ::beforeтаке, але я насправді цього не зрозумів.

Хтось може пояснити, як це працює?

Це робить елемент DOM перед тим, що ми вибираємо за допомогою CSS?

css css-selectors

— Мохсен
джерело

1

Afaik, робоча група CSS вирішила префіксувати псевдоелементи додатковою двокрапкою, щоб диференціювати їх від псевдокласів, які мають лише одну двокрапку.

— Šime Vidas

5

... а оскільки позначення з двома двокрапками не реалізоване в IE8, нам доведеться почекати, поки воно не буде виведене з ринку (як у 2016 році чи близько того), перш ніж ми зможемо почати використовувати ::before. Чудова робота, Microsoft-.-

— Шіме Відас

1

Псевдоелементи існують з CSS1. Першими псевдоелементами були :first-letterі :first-line.

— BoltClock

17

Це відрізняє псевдоелементи від псевдокласів.

Різниця між псевдокласами та псевдоелементами описана на http://www.d.umn.edu/~lcarlson/csswork/selectors/pseudo_dif.html

— Роберт Леві
джерело

9

Позначення :: before (з двома двокрапками) було введено в CSS3 з метою встановлення дискримінації між псевдокласами та псевдоелементами. Браузери також приймають позначення: до введення в CSS 2. Джерело: developer.mozilla.org/en-US/docs/Web/CSS/::fore Як і раніше, є псевдоЕЛЕМЕНТ, а не псевдо-КЛАС (наприклад: hover) два двокрапки краще (таким чином, дотримуючись стандарту CSS3).

— JoostS

67

Згідно з цими документами, вони еквівалентні:

element:before  { style properties }  /* CSS2 syntax */

element::before { style properties }  /* CSS3 syntax */

Єдина відмінність полягає в тому, що подвійна двокрапка використовується в CSS3, тоді як одинарна двокрапка - це застаріла версія.

Міркування:

Позначення :: before було введено в CSS 3 з метою встановлення дискримінації між псевдокласами та псевдоелементами. Браузери також приймають позначення: до введення в CSS 2.

— Кріс Лапланте
джерело

12

Вони по суті означають одне і те ж. Це ::було введено в CSS3, щоб допомогти розпізнати між псевдоелементами (наприклад: до та: після) та псевдокласами (як: link та: hover).

— вундеркінд
джерело

6

Я перевірив MDN та w3.org , і найкраще, що я міг придумати, - це те, що ::використовується для структурних змін і :використовується для стилізації .

Наразі вони взаємозамінні з міркувань сумісності.

Здається, це відокремлює :link(наприклад), який стиль a <a>, від :before(що є структурною зміною).

:для стилю, ::для структури.

— Однозначна1ти
джерело

2

Один - це спосіб CSS2 (: before), а інший - CSS3 (:: before). В даний час вони взаємозамінні в браузерах, які підтримують CSS2 та CSS3.

Ось гарне пояснення: http://www.impressivewebs.com/before-after-css3/

— b01
джерело

У чому різниця між: before та :: before?