4

Twitter の bootstrap.css には次のようなコードがあります。

:-moz-placeholder {
  color: #999999;
}

:-ms-input-placeholder {
  color: #999999;
}

::-webkit-input-placeholder {
  color: #999999;
}

::の前について質問です-webkit-input-placeholder。なぜ 2 つ::、それは何のためですか?

4

2 に答える 2

4

::疑似要素を示します (例: ::beforeand ::after)。:疑似クラスを示します (例: :linkand :hover)。疑似要素と疑似クラスを区別するのは単なる命名規則です。::IE8 以下では、この規則はサポートされていません。

W3C仕様から直接これら2つの説明があります：http://www.w3.org/TR/CSS21/selector.html#pseudo-elements

于 2012-08-03T15:46:24.107 に答える
2

:疑似クラス用です。これは、既存の要素の変更です。 :hoverたとえば、は同じ要素を表しますが、マウスポインタがその上にあります。 :focusカーソルがフォーム要素にあるときです。

::スタイリングしている要素の直接の一部ではない疑似要素用です。代わりに、それらはDOMには存在しない要素ですが、とにかくスタイルを設定できます。 ::after実際には存在しない要素のスタイルを作成できるため、これはこの良い例です。

ただし、通常どおり、ブラウザベンダーからの誤解の灰色の領域があるように見えます。IEとFirefoxは、プレースホルダーが疑似クラスであり、Webkitがそれを疑似要素のように扱うと信じているようです。

これにより、構文だけでなく、スタイルも変更されます。ChromeとFirefoxでこれをチェックしてください：http： //jsfiddle.net/UxAY6/

そのフィドルをWebkitで表示すると、赤い境界線がテキストフィールド内に表示されます。テキストフィールド内のプレースホルダー疑似要素のスタイルを設定します。ただし、Firefoxは入力要素の疑似クラスであるため、プレースホルダーが表示されている間、境界線がテキストフィールドに適用されます。

于 2012-08-03T16:09:46.513 に答える