css將樣式元素應用於部分孩子

Question

因此，我正在創建一個頁面，其中動態創建具有“問題”和“答案”類的元素，並且它們一個出現在另一個內部（因此第一個問題 div 包含答案 div，其中包含以下問題等），並且我希望它們具有不同的邊框顏色，例如紅色用於問題，藍色用於答案，但我不能只在我的 .css 文件中編寫它們的邊框顏色屬性，因為所有內容都是遞歸出現的，最后寫入的屬性是結果應用於所有元素。 解決辦法是什么？

它看起來像這樣：

<div class="management">
        <button class="btn btn-primary addtree" type="button">Add new tree</button>
        <ul>
            <div id="new"></div>            
        </ul>
    </div>

<script>
    $(document).ready(function(){
        var ident = 0;
        var question;
        var answer;
        $.get('question', function(data){
                question = data;
        });
        $.get('answer', function(data){
                answer = data;
        });

        $(".management").on("click", ".addtree", function(){
            ident++; 
            $('#new').append(question);
            $('.question:last').attr('id',ident);
        });

        $(".management").on("click", ".addquestion", function(){ 
            ident++;
            $(this).parent().append(question);
            $(this).parent().children('.question').attr('id',ident);
            $(this).parent().children('.answer').css({"margin-left": "30px"});
            $(this).parent().children('.question').css({"margin-left": "30px"});
        });

        $(".management").on("click", ".addoption", function(){
                $(this).parent().append(answer);
                var currid = $(this).parent().attr('id');
                $(this).parent().children('.answer').attr('id',ident);
                $(this).parent().children('.answer').css({"margin-left": "30px"});
                $(this).parent().children('.question').css({"margin-left": "30px"});
            });
</script>

Answer 1

據我所知，你想要這樣的東西：

 .question { border: 2px solid red; } .answer { border: 2px solid blue; } .question, .answer { padding: 8px; margin: 0 0 8px 0; }

 <div class="question"> Lorem ispum dolor sit amet <div class="answer"> Color mit apsem </div> </div> <div class="question"> Lorem ispum dolor sit amet <div class="answer"> <div class="question"> Lorem ispum dolor sit amet <div class="answer"> Color mit apsem </div> </div> </div> </div>