2017-12-18 22 views
-2

私は過去にgridsetapp.comを使用してレスポンスグリッドを作成しましたが、最近作成したばかりのものは動作していないため、その理由を理解できません。誰も私はこのグリッドCSSが動作していない理由を教えてもらえますか?

ここにCSSへのリンクがあります。

<html><head> 

<link href="https://get.gridsetapp.com/37722/" rel="stylesheet" /> 

</head> 

<body> 

    <div class="d1-d5" style="background:#aaa">ffggg</div> 
</body> 
</html> 

任意の考え:

https://get.gridsetapp.com/37722/ただ、基本的な何かを取得しようとしていますか?

+1

'https:// get.gridsetapp.com/37722 /'はディレクトリであり、CSSファイルではありません。 – Sablefoste

+0

これまでの経験に基づいて、これは通常動作し、その指示に従って動作します:https://gridsetapp.com/documentation/assets/#downloadsまた、ダウンロードされたバージョンも動作しません。 – Sadie

答えて

0

珍しいCSSリンクがあるにもかかわらず、ブラウザーは参照したCSSファイルを認識する必要があります。

しかし、あなたの参照を見て、あなたはクラスd1-d5にCSSを適用しようとしています。しかし、私が知る限り、CSSファイルにはちょうどd1-d5と一致するものはありません。開発ツール(ほとんどのブラウザではF12)を使用します。彼らはあなたの友人です。その時点でが適用されているCSSが表示されます。には、JavaScriptやLinkedファイルが適用されます。

CSSを使用すると、ブラウザが識別できるものを正確に呼び出すようにする必要がありますが、それ以上の優先順位を付ける必要はありません。たとえば、ほとんどあなたが選択するために呼び出すことができ、あなたのd1-d5は、次のとおりです。

HTMLのボディdiv.d1-D5 {...}あなたがリンクされたCSSファイル内の一方

、私は両親や子供たちの多くを見ます.d1-d5 .d1,.d1-d5 .d2,.d1-d5 .d3,.d1-d5 .d4,.d1-d5 .d5のようにd1-d5を検索するとき。 あなたはこのチェーン(.d1-d5 .d5)の最後のを望んでいた場合は、次のようなHTML必要があるでしょう:

<html> 
    <body> 
    <div class='d1-d5'> 
     <div class='d5'> 
     This text will have the CSS applied. 
     </div> 
    </div> 
    </body> 
</html> 

.d1-d5 .d5として書かれたCSSは、文字通り「を持つ要素の子孫としてクラスd5を持つ要素を選択する意味クラス.d1-d5 "。あなたのHTMLは、の親セレクタと子セレクタを含む)のCSSファイルのどのクラスとも一致しません。上記のHTMLを試してみると、width:18.05273834%;が適用されています(これはあまり分かりませんが、簡単な確認のためにbackground:yellow;などを試してみてください)。

最後に、CSSを使用しているときにインラインスタイリングはなぜですか?これは悪いフォームで、CSSファイルを制御できない場合にのみ適切です。

関連する問題