私はどのようにしてクラス内のIDをターゲットにしますか？

LESSに比較的新しいが、入れ子の仕組みを試してみる。私は少ないページで物事を読んだ。私はどのようにしてクラス内のIDをターゲットにしますか？

<!DOCTYPE html> 

<html> 
<head class="Setup"> 
    <link rel="stylesheet/less" type="text/css" href="../LESS/core.less"/> 
</head> 
<div class="Test"> 
    <span id="Test1" class="Test2"></span> 
</div> 
</html>

.Test2 { 
    display: block; 
    #Test1 { 
     .background1; 
     width: 40px; 
     height: 1000px !important; 
    } 
}

LESSが、私は入れ子にすることなく、それを書くとしたら、それは

.Test2 { 
    display: block; 
} 

#Test1 { 
    .background1; 
    width: 40px; 
    height: 1000px !important; 
}

選択図】図を作品

HTMLはちょうど{背景：赤;}です。コンセプトは私の頭の中でちょうどうんざりしていますか？

出典

2016-04-29 Gensoki

ネスティング問題と不一致マークアップ

ネスティングは、一般的に、特定の要素が別の要素の下に表示されることを示しているので、あなたの現在のコードは、正しい考えを持っています。

現在、ネストする例では、 "Test1"というidの要素を、 "Test2"というクラスの要素の下にネストしています。この要素は、マークアップと同じではありません。

あなたの要素をターゲットに同じマークアップを使用したい場合は、代わりに.Testにあなたの最も外側の.Test2セレクタを変更することを検討：

/* This will target an element with id "Test`" below an element with class "Test" */ 
.Test { 
    display: block; 
    #Test1 { 
     width: 40px; 
     height: 1000px !important; 
    } 
}

あなたは、これは以下のCSSに変換する方法を見ることができます。

バックグラウンドを確認する

さらに、使用している.backgroundセレクタに問題があるようです。次の例のように、 "Test2"要素の下に追加のスタイルを指定することを意味しましたか？

次のようにコンパイルなる

.Test { 
    display: block; 
    #Test1 { 
     .background{ 
      width: 40px; 
      height: 1000px !important; 
     } 
    } 
}

：

出典

2016-04-29 12:56:43

.background1はIでちょうどミックス .background1 {背景添加される：赤。 } とありがとう、これは私の頭をクリアするのを助けた – Gensoki

ああ。私はそれについての定義が見えなかったので、私は確かではなかったので、それはタイプミスであると仮定しました。 –

私はどのようにしてクラス内のIDをターゲットにしますか？

答えて

関連する問題