html - css 将样式元素应用于部分子项

Question

所以我正在创建页面，其中动态创建类“问题”和“答案”的元素，并且它们出现在另一个内部(因此第一个问题 div 包含答案 div，其中包含以下问题等等on)，并且我希望它们具有不同的边框颜色，例如红色的用于问题，蓝色的用于答案，但我不能只在我的 .css 文件中写入它们的 border-color 属性，因为所有内容都是递归显示的，最后写入的属性因此应用于所有元素。可能的解决方案是什么？

看起来像这样:

<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>