タグ付けされた質問 「css」

インラインCSSコードを記述しなければならない場合があり、アンカーにホバースタイルを適用したいと思います。 a:hoverHTMLスタイル属性内でインラインCSS を使用するにはどうすればよいですか？ たとえば、HTMLメールでCSSクラスを確実に使用することはできません。

1017 html  css  inline-styles 

CSS contentプロパティをどのように使用してHTMLエンティティを追加しますか？ このようなものを使用する と、改行しないスペースの代わりに画面に出力されます。 .breadcrumbs a:before { content: ' '; }

1013 html  css  html-entities  css-content 

StackаэтотвопросестьответынаStack Overflowнарусском：СутьклассаclearFix 最近、私はいくつかのウェブサイトのコードを調べて<div> いて、すべてにクラスがあることがわかりましたclearfix。 Googleで簡単に検索したところ、IE6用である場合があることを知りましたが、実際のクリアフィックスとは何ですか？ クリアフィックスのないレイアウトと比較して、クリアフィックスのあるレイアウトの例をいくつか教えていただけますか？

1003 html  css  layout  cross-browser  clearfix 

一部のブラウザー（特に、FirefoxとOpera）は、ブラウザーセッション間であっても、.cssファイルと.jsファイルのキャッシュされたコピーを非常に熱心に使用していることに気付きました。これにより、これらのファイルの1つを更新しても問題が発生しますが、ユーザーのブラウザーはキャッシュされたコピーを使い続けます。 問題は、ファイルが変更されたときにユーザーのブラウザーにファイルの再読み込みを強制する最もエレガントな方法は何ですか？ 理想的には、ソリューションは、ページにアクセスするたびにブラウザにファイルをリロードさせません。私は自分の解決策を回答として投稿しますが、誰かがより良い解決策を持っているかどうか知りたいので、投票を決定させてください。 更新： しばらくここでの議論を許可した後、私はJohn Millikinとda5idの提案が役立つことがわかりました。これには「自動バージョン管理」という用語があることがわかりました。 私の元の解決策とジョンの提案を組み合わせた新しい回答を以下に投稿しました。 SCdFによって提案された別のアイデアは、偽のクエリ文字列をファイルに追加することです。（偽のクエリ文字列がpiによって送信されたときにタイムスタンプを自動的に使用する一部のPythonコード）。ただし、ブラウザがクエリ文字列を含むファイルをキャッシュするかどうかについては、いくつかの議論があります。（ブラウザにファイルをキャッシュして、次回のアクセス時に使用することを忘れないでください。ファイルが変更された場合にのみ、再度ファイルをフェッチする必要があります。） 偽のクエリ文字列で何が起こるかは明らかではないので、私はその答えを受け入れません。

993 javascript  css  caching  auto-versioning 

一部のブラウザー（Chromeなど）がタイプ番号のHTML入力用にレンダリングする新しいスピンボックスを非表示にする一貫した方法はありますか？上/下矢印が表示されないようにするためのCSSまたはJavaScriptメソッドを探しています。 <input id="test" type="number">

984 javascript  css  html  input  numbers 

ブートストラップを使用しています。3つの列をすべて同じ高さにするにはどうすればよいですか？ これが問題のスクリーンショットです。青と赤の列を黄色の列と同じ高さにしたいと思います。 これがコードです： <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid"> <div class="row"> <div class="col-xs-4 panel" style="background-color: red"> some content </div> <div class="col-xs-4 panel" style="background-color: yellow"> catz <img width="100" height="100" src="https://lorempixel.com/100/100/cats/"> </div> <div class="col-xs-4 panel" style="background-color: blue"> some more content </div> </div> </div> コードスニペットを実行する結果を非表示スニペットを展開

965 css  twitter-bootstrap 

ある個人divを別の個人の上に重ねる際の支援が必要divです。 私のコードは次のようになります： <div class="navi"></div> <div id="infoi"> <img src="info_icon2.png" height="20" width="32"/> </div> 残念ながら、最初の中に、div#infoiまたはをネストすることはできません。imgdiv.navi div示されているように、2つの別個のである必要がありますが、div#infoi上div.naviと右端に、の上に中央揃えで配置する方法を知る必要がありdiv.naviます。

958 html  css  position  overlay 

クラス名の要素がたくさんありredますがclass="red"、次のCSSルールを使用して最初の要素を選択できないようです。 .red:first-child { border: 5px solid red; } <p class="red"></p> <div class="red"></div> コードスニペットを実行する結果を非表示スニペットを展開 このセレクターの何が問題になっていますか、またどのように修正すればよいですか？ コメントのおかげで、要素が親の最初の子である必要があることがわかりましたが、これは私の場合とは異なります。私は次の構造を持っていて、コメントで述べられているようにこのルールは失敗します： .home .red:first-child { border: 1px solid red; } <div class="home"> <span>blah</span> <p class="red">first</p> <p class="red">second</p> <p class="red">third</p> <p class="red">fourth</p> </div> コードスニペットを実行する結果を非表示スニペットを展開 クラスで最初の子をターゲットにするにはどうすればよいredですか？

947 css  css-selectors 

jQueryを使用して::beforeand ::after（および1つのセミコロンを持つ古いバージョン）などのCSS疑似要素を選択/操作する方法はありますか？ たとえば、私のスタイルシートには次のルールがあります。 .span::after{ content:'foo' } jQueryを使用して「foo」を「bar」に変更するにはどうすればよいですか？

943 javascript  jquery  css  jquery-selectors  pseudo-element 

オンラインの数え切れないほどの場所で、JavaScriptの前にCSSを組み込むことを推奨しています。推論は一般に、この形式のものです： CSSとJavaScriptの注文に関しては、CSSが最初に来るようにします。その理由は、レンダリングスレッドには、ページのレンダリングに必要なすべてのスタイル情報があるためです。JavaScriptのインクルードが最初に来る場合、JavaScriptエンジンはそれをすべて解析してから次のリソースセットに進む必要があります。つまり、必要なスタイルがすべて揃っていないため、レンダリングスレッドはページを完全には表示できません。 私の実際のテストでは、まったく異なるものが明らかになりました。 私のテストハーネス 次のRubyスクリプトを使用して、さまざまなリソースに特定の遅延を生成します。 require 'rubygems' require 'eventmachine' require 'evma_httpserver' require 'date' class Handler < EventMachine::Connection include EventMachine::HttpServer def process_http_request resp = EventMachine::DelegatedHttpResponse.new( self ) return unless @http_query_string path = @http_path_info array = @http_query_string.split("&").map{|s| s.split("=")}.flatten parsed = Hash[*array] delay = parsed["delay"].to_i / 1000.0 jsdelay = parsed["jsdelay"].to_i delay = 5 …

897 javascript  css  performance 

私はTwitter Bootstrap 3を使用しています。divたとえば、垂直方向に2つ揃えたい場合、JSFiddleリンクに問題があります。 <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <div class="row"> <div class="col-xs-5"> <div style="height:5em;border:1px solid #000">Big</div> </div> <div class="col-xs-5"> <div style="height:3em;border:1px solid #F00">Small</div> </div> </div> コードスニペットを実行する結果を非表示スニペットを展開 Bootstrapのグリッドシステムではfloat: left、ではなくを使用しているdisplay:inline-blockため、このプロパティvertical-alignは機能しません。私はmargin-topそれを修正するためにを使ってみましたが、これはレスポンシブデザインの良い解決策ではないと思います。

889 html  css  twitter-bootstrap  twitter-bootstrap-3 

jQueryを使用してCSSを変更し、入力値に基づいて追加しているスタイルを削除したいと思います。 if(color != '000000') $("body").css("background-color", color); else // remove style ? これどうやってするの？ 上記の線は、カラーピッカーを使用して色が選択されるたびに（つまり、マウスがカラーホイールの上に移動したときに）実行されることに注意してください。 2番目の注意：CSSファイルcss("background-color", "none")からデフォルトのスタイルが削除されるため、これを行うことはできません。jQueryによって追加され たインラインスタイルを削除したいだけです。background-color

868 javascript  jquery  css  background 

div2列のレイアウトを折り返すという古くからの問題があります。サイドバーがフローティングしているため、コンテナdivがコンテンツとサイドバーをラップできません。 <div id="container"> <div id="content"></div> <div id="sidebar"></div> </div> Firefoxの明確なバグを修正する方法は数多くあるようです。 <br clear="all"/> overflow:auto overflow:hidden 私の状況では、正しく機能しているように見えるの<br clear="all"/>は、少しだらしないソリューションのみです。overflow:auto私に厄介なスクロールバーを与えて、overflow:hidden確かに副作用があるはずです。また、IE7は動作が正しくないため、明らかにこの問題の影響を受けるべきではありませんが、私の状況では、Firefoxと同じ問題が発生しています。 現在利用可能な方法のうち、最も堅牢なものはどれですか。

864 css  clearfix 

（と）のdivセットがあり、中にテキストがあります。display:block90px heightwidth テキストを垂直方向と水平方向の両方の中央に揃える必要があります。 試してみましたtext-align:centerが、横の部分は動かないので試してみましたvertical-align:middleがうまくいきませんでした。 何か案は？

862 html  css 

~文字の検索は簡単ではありません。私はいくつかのCSSを調べていて、これを見つけました .check:checked ~ .content { } どういう意味ですか？

858 css  css-selectors