25

WebKitのカスタムスクロールバーのようなCSSを見たことがあります

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

これは、WebKitブラウザーのCSSを指定します。しかし、この演算子（::）はCSSではどういう意味ですか？

CSSの他のそのような演算子はどこにありますか？

4

6 に答える 6

17

後に続くものが「疑似要素」であることを示します。CSS セレクター レベル 3 仕様から:

疑似要素は、2 つのコロン (::) とそれに続く疑似要素の名前で構成されます。

そして、擬似要素は「ドキュメント ツリーに関する抽象化」を作成します。

疑似要素は、ドキュメント言語によって指定されたものを超えて、ドキュメント ツリーに関する抽象化を作成します。たとえば、ドキュメント言語は、要素のコンテンツの最初の文字または最初の行にアクセスするメカニズムを提供しません。疑似要素を使用すると、作成者は、他の方法ではアクセスできない情報を参照できます。疑似要素は、作成者がソース ドキュメントに存在しないコンテンツを参照する方法も提供します (たとえば、::before および ::after 疑似要素は、生成されたコンテンツへのアクセスを提供します)。

たとえば、::webkit-scrollbar疑似要素は、他の方法ではアクセスできない Webkit スクロールバーを参照するメカニズムを提供します。別の例:::first-letter疑似要素は、要素の最初の文字を参照する方法を提供します (他のコンテンツが前にない場合)。

于 2012-07-06T09:43:20.213 に答える
16

css3 では、疑似要素に二重コロン (::) を使用し、疑似クラスに単一コロン (:)を使用します。

単一のコロン構文 (「:before」または「:first-child」など) は、CSS3 より前のすべてのバージョンの CSS で、疑似クラスと疑似セレクターの両方に使用される構文です。CSS3 の導入により、疑似クラスと疑似要素を区別するために (そうです、違います)、CSS3 ではすべての疑似要素で二重コロン構文を使用する必要があり、すべての疑似クラスで次の構文を使用する必要があります。シングルコロン構文。

この記事を読むhttp://www.impressivewebs.com/before-after-css3/

于 2012-07-06T09:46:02.670 に答える
8

疑似要素を定義するために使用されます。ドキュメントの例として：

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

pこれにより、要素の最初の行が変更されます。選択されている実際の DOM 要素はありません。そのため、これは疑似要素です。

あなたの場合、body要素内の WebKit のスクロールバーを変更します。

body::-webkit-scrollbar

ドキュメント内にスクロールバー要素はありませんが、HTML ページ内でスクロールバーのスタイルを設定できます。

于 2012-07-06T09:43:48.233 に答える
2

Googleはここであなたの友達です。

疑似要素

疑似要素は、ドキュメント言語で指定されたものを超えて、ドキュメントツリーに関する抽象化を作成します。たとえば、ドキュメント言語は、要素のコンテンツの最初の文字または最初の行にアクセスするメカニズムを提供していません。疑似要素を使用すると、作成者はこの他の方法ではアクセスできない情報を参照できます。疑似要素は、ソースドキュメントに存在しないコンテンツを参照する方法を作成者に提供する場合もあります（たとえば、::beforeおよび::after疑似要素は生成されたコンテンツへのアクセスを提供します）。

疑似要素は、2つのコロン（::)とそれに続く疑似要素の名前で構成されます。

この::表記は、疑似クラスと疑似要素の区別を確立するために、現在のドキュメントで導入されています。既存のスタイルシートとの互換性のために、ユーザーエージェントは、CSSレベル1および2で導入された疑似要素（つまり、：first-line、：first-letter、：before、および：after）の以前の1コロン表記も受け入れる必要があります。この互換性は、この仕様で導入された新しい疑似要素では許可されていません。

http://www.w3.org/TR/css3-selectorsにあります

于 2012-07-06T10:10:39.533 に答える
2

人々はそれが実際に何を意味するのか理解するのに苦労しているので、これを追加したいと思いました:

基本的に、これは、存在するマークアップでは不可能な方法でドキュメントをフォーマットする方法です。良い例が W3 仕様にあります。

::first-letter 疑似要素の例を次に示します。

元の HTML フラグメント

<div>
<p>The first text.

疑似要素が適用された後の架空のマークアップ

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

ご覧のとおり、元の HTML では div と ap が指定されていましたが、標準の CSS を使用して最初の文字をフォーマットする方法がないため、疑似要素が追加され、最初の文字を変更できるようになりました。

疑似要素を使用すると、そのようなことができます..

于 2012-07-06T09:51:38.617 に答える
2

この演算子は CSS3 で新しく追加されたもので、疑似要素を意味します。

于 2012-07-06T09:46:26.663 に答える