Я видел CSS как Пользовательские полосы прокрутки в WebKit
body::-webkit-scrollbar {
width: 10px;
height: 13px;
background-color: white;
color: #EBEBEB;
border:none;
}
Указывает CSS для браузеров WebKit. Но что означает этот оператор (::) в CSS?
Где можно найти другие такие операторы в CSS?
Это указывает на то, что следующим является "псевдоэлемент". Из CSS Selectors level 3 spec:
Псевдоэлемент состоит из двух двоеточий (::), за которым следует имя псевдоэлемент.
И псевдоэлемент создает "абстракцию о дереве документов":
Псевдоэлементы создают абстракции о дереве документов за пределами те, которые указаны языком документа. Например, документ языки не предлагают механизмы доступа к первой букве или первой строка содержимого элемента. Псевдоэлементы позволяют авторам ссылаться к этой неприемлемой информации. Псевдоэлементы могут также предоставить авторам возможность ссылаться на контент, который не существует в исходный документ (например,:: before и:: after псевдоэлементы дают доступ к сгенерированному контенту).
Например, псевдоэлемент ::webkit-scrollbar предоставляет механизм для ссылки на полосу прокрутки webkit, которая в противном случае была бы недоступна. Другой пример: псевдоэлемент ::first-letter предоставляет способ ссылаться на первую букву элемента (если ему не предшествует какой-либо другой контент).
В css3 мы используем double colon (::) для псевдоэлемента и одного двоеточия (:) для псевдокласса
Синтаксис одного двоеточия (например, ": before" или ": first-child" ) является синтаксис, используемый как для псевдоклассов, так и для псевдоселекторов во всех версии CSS до CSS3. С введением CSS3, чтобы сделать дифференциацию между псевдоклассами и псевдоэлементами (да, они разные), в CSS3 все псевдоэлементы должны использовать синтаксис с двойной колонкой, и все псевдоклассы должны использовать одну двоеточие синтаксис.
Прочтите эту статью http://www.impressivewebs.com/before-after-css3/
Используется для определения pseudo-element. В качестве примера из документации:
p::first-line { text-transform: uppercase }
Это изменяет первую строку элементов p. Там нет реального элемента DOM, который выбран, поэтому он является псевдоэлементом.
В вашем случае он изменяет полосы прокрутки в WebKit в элементе body:
body::-webkit-scrollbar
В вашем документе нет элемента прокрутки, но это по-прежнему позволяет вам создавать полосы прокрутки на вашей странице HTML.
этот оператор является новым добавлением в CSS3.it означает псевдоэлемент.
Google является вашим другом здесь.
Псевдоэлементы создают абстракции о дереве документов, кроме тех, которые указаны языком документа. Например, языки документа не предоставляют механизмов доступа к первой букве или первой строке содержимого элемента. Псевдоэлементы позволяют авторам ссылаться на эту неприемлемую информацию. Псевдоэлементы могут также предоставить авторам возможность ссылаться на контент, который не существует в исходном документе (например,:: before и:: after псевдоэлементы дают доступ к сгенерированному контенту).
Псевдоэлемент состоит из двух двоеточий (::), за которым следует имя псевдоэлемента.
Это: нотация вводится текущим документом, чтобы установить дискриминацию между псевдоклассами и псевдоэлементами. Для совместимости с существующими таблицами стилей пользовательские агенты также должны принимать предыдущую однотопливную нотацию для псевдоэлементов, введенных в CSS-уровнях 1 и 2 (а именно: first-line,: first-letter, before и: after). Эта совместимость не допускается для новых псевдоэлементов, представленных в этой спецификации.
Думаю, я бы добавил это, потому что люди с трудом понимают, что это на самом деле означает:
В принципе, это способ получить формат документа таким образом, чтобы это было невозможно, используя существующую разметку. Хороший пример существует в спецификации 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 позволяют делать такие вещи.