問題タブ [pseudo-class]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
1 に答える
2939 参照

html - 前後に CSS 疑似クラスを使用する

ということでCSS疑似クラスの前後で実験してみました。これらの擬似を使用してヘッダー要素を作成しようとしました。これは、左右の画像を保持するために div を使用することを減らすためです。これは HTML のコードです

したがって、従来のヘッダー要素を作成するための 3 つの画像があります。これは、左右に幅 20 ピクセル、高さ 100 ピクセル、中央には幅 1 ピクセル、高さ 100 ピクセルで、水平方向に繰り返されます。そしてここに私のCSS

したがって、問題は、h1要素を削除すると完全に整列しますが、これらの要素を配置すると、::after疑似クラスが押し下げられ、高さに応じて残りのスペースが必要になります。このh1要素を作成するにはどうすればよいですか::afterスペースに影響を与えずに中間スペースだけを取るには?

0 投票する
2 に答える
7211 参照

css - 単純なcss:before:hoverが機能していませんか?CSSlintエラーはありませんか?

http://jsfiddle.net/nicktheandroid/k93ZK/2/

これは本当に単純なはずです、なぜそれが機能しないのか理解できません。カーソルを合わせると、:before不透明度が1に変更されますが、変更されません。なんで?

編集:私はChromeを使用しています。

0 投票する
2 に答える
541 参照

jquery - jQueryの複数疑似クラス

テーブルの最初の列にゼブラ効果を加えたいと思います。tr の最初の td を選択して nth-child(2n) を適用するにはどうすればよいですか?

0 投票する
1 に答える
4593 参照

css - Less css のネストされた疑似クラス

LESS CSS を使用して CSS を記述しようとしていますが、ネストされた疑似クラスに問題があります。

出力は次のとおりです。

しかし、私はこれが欲しい:

何か案は?

0 投票する
2 に答える
25260 参照

css - CSS: css 疑似クラス :before および :after で画像スプライトを使用する

私は前にそれを試したことはありません。2 つのアイコンを含むイメージ スプライトを作成しました。各アイコンの幅と高さは 26 ピクセルです。したがって、スプライトは 26x52px です。

div.something または div.anything のいずれかにある要素があります。どのクラスにあるかに応じて、左または右にコーナー キャップを追加します。

したがって、.element を相対的に配置し、疑似クラス:beforeを img に適用し、高さと幅 26px で絶対的に配置して、スプライトのアイコンが 1 つだけ収まるようにします。また、「overflow:hidden」を適用してスプライトの 2 番目のアイコンを非表示にします。

これは、スプライトの最初の上部アイコンを使用する左隅でうまく機能します。しかし、「なんでも.element」のスプライトで2番目のアイコンだけを表示するにはどうすればよいのでしょうか。

したがって、実際には「マスク」は -2px、-2px に配置する必要がありますが、内部のスプライト img は -26px で開始する必要があるため、2 番目のアイコンが表示されます。

これは、私が現在行っている方法で css で可能ですか?

0 投票する
2 に答える
130 参照

html - 記事付きのCSS疑似クラス

CSSを使用してページの最初の記事を取得しようとしています。私は以下を試しました:

しかし、これらはどちらも何もしていないようです。

私のHTMLマークアップは次のとおりです(頭を削除し、コンテンツを省略)。

最新バージョンのクロームも使用しています。

0 投票する
3 に答える
456 参照

javascript - CSS pseudo class won't work when normal class is set from javascript, under FF

I have p.first_p:first-letter in my stylesheet, as I checked, it works well when class first_p is set in HTML. Problems start when I use javascript to find elements and then set their class.

Under Chrome and Opera it works fine (I need to check IE 8 and 9, and FF3).

FF 5.01 changes the class, but still pseudo class setting doesn't affect the element.

It seems that FF needs to 'refresh' css settings of element before pseudo class starts working, so I made rather dirty workaround - script replaces affected node with its clone.

Is there a better way to solve that issue? Some way to make FF recalculate everything it knows about node? Also that workaround isn't enough for IE 7.

Edit: yeah, pseudo-element not pseudo-class, my bad

0 投票する
1 に答える
6590 参照

css - CSS :[チェック済み] と組み合わせた疑似要素の後: 異なるアフター要素が機能しない?

独自のラジオボタンとチェックボックスのスタイルを設定して、Web フォームを起動しようとしています。これを行うには、ラジオ/チェックボックス自体を非表示にして、次のように :after 疑似クラスを使用してラベルに状態を示す要素を作成します。

さて、これはラジオに対して完全にうまく機能します。ラベルをクリックすると、小さなチェックボックスがラベルに表示され、他のラベルには表示されません。しかし、問題はチェックボックスです: チェックされたものはまだ緑色のチェックボックスを表示しますが、チェックされていないものはまったく表示されず、本来あるべき赤いものも表示されません. のようです

部分がまったくグリップしていないか、:checked 疑似クラスがそのスタンドアロンを上書きするようです。

ここで大きな何かが欠けていますか?

よろしく

0 投票する
2 に答える
256 参照

html - HTML5 & CSS3 複数の疑似クラスと translateX/Y プロパティの使用

まず最初に、私はコーディングが得意ではないことを認めさせてください。私はグラフィック デザイナーですが、HTML5 を独学で学ぼうとしています。ほとんどの問題をトラブルシューティングすることができましたが、今は困惑しています。

基本的に私の問題は、iframe 内のサムネイルをクリックすると、サムネイルが画面の一番上に配置されることです。translateY を「page」クラスに追加してみました。iframe ページ内でも試しましたが、メインの画像がずれてしまいました。

私のテストページはhttp://www.brodylahd.com/index2でオンラインです

猫チェンへの返信

はい、それが私がする必要があることだと思います...しかし、それでも同じ水平方向の動きがありますか?

0 投票する
3 に答える
2579 参照

html - 疑似クラス:最初の子が機能しない

私は何か間違ったことをしていますか?

css/sass:

html/haml:

これは機能せず、最初の にまだ境界線があり<article>ます。別のクラスを作成article.noborderし、最初の記事のようなことをして境界線をなくす必要があります。何か助けていただければ幸いです...cssは私を嫌っています。