idで特定の要素にCSSを適用する方法

Question

テンプレートはすべてのnavにapply cssを使用していますが、他のnavのCSSを上書きしますが、idを使用してこの非常に固有のnavにCSSを書きました。私は最後のCSSが適用されていると私はこれを同じ結果を試したときに読んだことがあります。

nav { 
    width: 55%; 
    float: left; 
} 
nav ul { 
    padding: 0; 
    float: right; 
    padding-top: 2px; 
    color:#dce3e4; 
} 
nav li { 
    display: inline-block; 
    position:relative; 
    margin: 0 1px; 
} 
nav a { 
    color: #fff; 
    display: inline-block; 
    text-align: center; 
    text-decoration: none; 
    line-height: 40px; 
} 

、ここで私が適用しようとしているCSSです：元のコードで

#nav > a { 
    display: none !important; 
} 

#nav li { 
    position: relative !important; 
} 

#nav > ul { 
    height: 3.75em !important; 
} 

#nav > ul > li { 
    width: 25% !important; 
    height: 100% !important; 
    float: left !important; 
} 

#nav li ul { 
    display: none !important; 
    position: absolute !important; 
    top: 100% !important; 
} 

Answer 1

nav（HTML5タグ）があります。あなたの追加されたコードには#nav - IDがあります。あなたのコードに本当に<nav id="nav">のようなタグを使いましたか？そうでなければ、それを変更しなければなりません。

編集/追加：

あなたのコメントにあなたのコードを見た後、ここにいくつかのより多くの考えがある：

は #nav > aルールがそのコードに適用されることはありません

• ：なしaタグなどはありませんとにかくあなたのルールは上記のものを変更しません。#nav
• #nav liはposition: relativeです。
• #nav li ul：コードには、これが適用される要素はありません。

これらのルールが適用されるあなたのコメントにあなたが書いた以上のコードがあるかもしれません。はいの場合は、HTMLコードを投稿する必要があります。しかし、それがすでにnavの完全なHTMLコードである場合、これらのルールが効果を持たないのはこれらの理由です。要素に

#nav > a { 
    display: none !important; 
} 

>文字ポイント：

<nav id="nav"> 
    <ul> 
     <li><a href="/">Design</a></li> 
     <li><a href="/">HTML</a></li> 
     <li><a href="/">CSS</a></li> 
     <li><a href="/">JavaScript</a></li> 
    </ul> 
</nav> 

そして、あなたは、例えば、などの要素を選択しようとしている：あなたは、あなたのHTML構造はこのようになっていることをコメントに入れ

Answer 2

親のの直下の子です。たとえば、#navの直下の子として<a>要素がありません。これがあなたのCSSが選ばれていない理由です。