問題タブ [pseudo-element]

私は単一の要素を持つ複数の背景に触発され、それをやろうとしました...しかし失敗しました。

これはjsfiddleの私のサンプルコードです。

：before要素のImage（blue bird）は、main（white bird）要素に移動しません。これが私が：beforeで試したことです。

• content：url（）またはbackground：url（）
• z-index：-1またはメインよりも小さい任意の数
• ：beforeと：after :(

どうすればメイン要素に送り返すことができますか？

JavaScriptを介してCSS疑似要素スタイルを変更することは可能ですか？

たとえば、次のようにスクロールバーの色を動的に設定したいと思います。

また、スクロールバーに次のように非表示にするように指示できるようにします。

ただし、これらのスクリプトは両方とも次を返します。

Uncaught TypeError：nullのプロパティ'style'を読み取れません

これについて他の方法はありますか？
クロスブラウザーの相互運用性は重要ではありません。Webkitブラウザーで機能するために必要なだけです。

CSSを使用して選択したテキストの色を指定することに関するいくつかの質問：

ブラウザによって実装されるデフォルトのCSSに次のようなルールが存在するとします。

さらに、次のようなルールがサイト固有の作成されたスタイルシートで定義されていると想像してください。

1. これらのルールを考えるとbackground-color、選択した本文のテキストはどうなりますか？それでしょうかwhite、それともHighlight？

   おそらく、作成者スタイルシートのルールはデフォルトのルールをオーバーライドする必要があります。これは、特異性に応じて、後で指定されるのとbody同じように特異的::selectionであるためです（したがって、前のエントリをオーバーライドする必要があります）。

   一方、それは選択されたときにテキストが見えなくなる結果になります（選択されたテキストが白地に白になるようにHighlight青とHighlightText白の場合、選択されたテキストを白に上書きするbackground-colorと白になるため） -オンホワイト）。

2. ステップ2の動作が望ましくないと仮定して、それを回避するにはどうすればよいですか？

• これはユーザースタイルシートのバグだと言ってください。これは、指定background-colorせずに指定するべきではありませんcolorか？

• 疑似要素がセレクターの一部として指定されているbody場合を除いて、選択した本文テキストと一致しないと言いますか？::selection

contentCSSプロパティに文字列の代わりに html コードを挿入し:beforeたり:after、次のような要素を挿入したりすることができるかどうか疑問に思っています。

これは非常に便利です...Javascriptを介して行うこともできますが、これにcssを使用すると、本当に生活が楽になります:)

現在iOSでモバイルサイトをテストしています（まもなく他のデバイスにアクセスするため、これが他のOS /ブラウザに関係するかどうかは不明です）。

モバイルサファリがスクロール中にリンクのアクティブ状態をトリガーするのはなぜですか？

私のテストページは、100％の幅に拡張される各リストアイテム内にリンクタグが付いた順序付けられていないリストで構成されています。問題は、通常のスクロール中に：active状態がトリガーされ、：active状態中にのみ表示されるように意図された背景が表示されることです（例から不要なスタイルとコンテンツを明らかに省略しています）。

リンクの種類に応じて、リンクにCSSがあります。この場合、パスワードで保護されており、外部リンクです。

だから私はこのようなCSSを持っています：

しかし、私がこのようなことをしようとすると：

最後のアイコン、この場合はicon-lock.pngのみが表示されます。これは理にかなっています。コンテンツ値は結合されていない場合に一度しか設定できないため、最後のクラス宣言がそれを上書きします。これらのリンククラスを簡単に組み合わせることができるように、これら2つを組み合わせる方法はありますか（合計4つあります）。コンボごとに別々のクラス/画像を作成したくありません。

ページのフッターにナビゲーションバーがあります。これは、もちろんIE7を除いて、すべてセットアップされ、機能しています。パイプ「|」を配置するために：after疑似要素を使用しました それぞれの後<li>にナビゲーションバーに表示されますが、IE7では表示されません。それは大したことではなく、それほど醜いことでもありませんが、それを汚したり、IE7をだまして機能させるための何かを見つけることができないようです。

いくつかの背景

アプリケーションでフォームを表示しており、各フィールド (または関連するフィールドのセット) をUL/LI要素で囲んでいます。これは例です:

ご覧のとおりrequired、必須フィールドのLI要素にクラスを設定しているので、それらlabelが表示されたら、疑似要素を定義して、::afterその後に赤いアスタリスクを追加します。

問題

私が抱えている問題は、<div class="field">コンテナにチェックボックスまたはラジオボタンのリストがある場合です。ラジオ ボタンまたはチェックボックスの横にあるラベルをクリック可能にするには、label.

もちろん問題は、ラジオ ボタンの横にある各ラベルにアスタリスクが表示されることです。アスタリスクもli.required要素内に含まれているためです。

質問

に含まれる::afterすべての要素から疑似要素を削除するにはどうすればよいですか? 実際に定義する必要がありますが、その内容を空の文字列に設定する必要がありますか、それともすべて一緒に削除することは可能ですか?labeldiv.field

のスタイル定義を::afterに変更できます

しかし、互換性の理由から、これらの特別な CSS セレクターは避けたいと考えています。

:beforeサイトのダウンロード リンクに小さな画像を追加するために疑似要素を使用しています。画像の高さが行の高さよりも大きく、画像の下部がテキストの下部に揃えられています。

擬似要素の垂直方向の配置を変更するにはどうすればよいですか? 理想的には、画像の中心がテキストの中心と一致するようにしますか?

私は次のCSSを使用していますが、これは機能しているようです。

ただし、出力はリテラルであり、実際の文字列を示しているため、文字はこのようにエンコードされているようには見えません。

エンコードできない場合は、エンコードをサポートしているため、jQueryで.append（）などを使用する必要があるように感じます。何か案は？