Что означает этот оператор (::) в CSS?

Я видел CSS как Пользовательские полосы прокрутки в WebKit

body::-webkit-scrollbar {
    width: 10px;
    height: 13px;
    background-color: white;
    color: #EBEBEB;
    border:none;
}

Указывает CSS для браузеров WebKit. Но что означает этот оператор (::) в CSS?

Где можно найти другие такие операторы в CSS?

Ответы

Ответ 1

Это указывает на то, что следующим является "псевдоэлемент". Из CSS Selectors level 3 spec:

Псевдоэлемент состоит из двух двоеточий (::), за которым следует имя псевдоэлемент.

И псевдоэлемент создает "абстракцию о дереве документов":

Псевдоэлементы создают абстракции о дереве документов за пределами те, которые указаны языком документа. Например, документ языки не предлагают механизмы доступа к первой букве или первой строка содержимого элемента. Псевдоэлементы позволяют авторам ссылаться к этой неприемлемой информации. Псевдоэлементы могут также предоставить авторам возможность ссылаться на контент, который не существует в исходный документ (например,:: before и:: after псевдоэлементы дают доступ к сгенерированному контенту).

Например, псевдоэлемент ::webkit-scrollbar предоставляет механизм для ссылки на полосу прокрутки webkit, которая в противном случае была бы недоступна. Другой пример: псевдоэлемент ::first-letter предоставляет способ ссылаться на первую букву элемента (если ему не предшествует какой-либо другой контент).

Ответ 2

В css3 мы используем double colon (::) для псевдоэлемента и одного двоеточия (:) для псевдокласса

Синтаксис одного двоеточия (например, ": before" или ": first-child" ) является синтаксис, используемый как для псевдоклассов, так и для псевдоселекторов во всех версии CSS до CSS3. С введением CSS3, чтобы сделать дифференциацию между псевдоклассами и псевдоэлементами (да, они разные), в CSS3 все псевдоэлементы должны использовать синтаксис с двойной колонкой, и все псевдоклассы должны использовать одну двоеточие синтаксис.

Прочтите эту статью http://www.impressivewebs.com/before-after-css3/

Ответ 3

Используется для определения pseudo-element. В качестве примера из документации:

p::first-line { text-transform: uppercase }

Это изменяет первую строку элементов p. Там нет реального элемента DOM, который выбран, поэтому он является псевдоэлементом.

В вашем случае он изменяет полосы прокрутки в WebKit в элементе body:

body::-webkit-scrollbar

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

Ответ 4

этот оператор является новым добавлением в CSS3.it означает псевдоэлемент.

Ответ 5

Google является вашим другом здесь.

Псевдо-элементы

Псевдоэлементы создают абстракции о дереве документов, кроме тех, которые указаны языком документа. Например, языки документа не предоставляют механизмов доступа к первой букве или первой строке содержимого элемента. Псевдоэлементы позволяют авторам ссылаться на эту неприемлемую информацию. Псевдоэлементы могут также предоставить авторам возможность ссылаться на контент, который не существует в исходном документе (например,:: before и:: after псевдоэлементы дают доступ к сгенерированному контенту).

Псевдоэлемент состоит из двух двоеточий (::), за которым следует имя псевдоэлемента.

Это: нотация вводится текущим документом, чтобы установить дискриминацию между псевдоклассами и псевдоэлементами. Для совместимости с существующими таблицами стилей пользовательские агенты также должны принимать предыдущую однотопливную нотацию для псевдоэлементов, введенных в CSS-уровнях 1 и 2 (а именно: first-line,: first-letter, before и: after). Эта совместимость не допускается для новых псевдоэлементов, представленных в этой спецификации.

Найдено http://www.w3.org/TR/css3-selectors

Ответ 6

Думаю, я бы добавил это, потому что люди с трудом понимают, что это на самом деле означает:

В принципе, это способ получить формат документа таким образом, чтобы это было невозможно, используя существующую разметку. Хороший пример существует в спецификации W3:

Вот пример для псевдо-элемента:: first-letter

Оригинальный фрагмент HTML

<div>
<p>The first text.

Вымышленная разметка после применения псевдоэлемента

<div>
<p><div::first-letter><p::first-letter>T</...></...>he first text.

Как вы можете видеть - исходный HTML задал div и p, но нет способа форматировать первую букву с использованием стандартного CSS, поэтому псевдоэлементы были добавлены, позволяя модифицировать первую букву

Элементы Psuedo позволяют делать такие вещи.