css样式何时/如何应用于动态添加的元素？

CSS样式可以通过以下几种方式应用于动态添加的元素：

内联样式：可以通过在元素的style属性中直接定义CSS样式来应用于动态添加的元素。例如：

<div id="myDiv"></div>
<script>
    var myDiv = document.getElementById("myDiv");
    myDiv.style.color = "red";
    myDiv.style.fontSize = "16px";
</script>

这样就会将动态添加的<div>元素的文本颜色设置为红色，字体大小设置为16像素。

类选择器：可以通过为动态添加的元素添加一个CSS类，并在CSS样式表中定义该类的样式来应用于元素。例如：

<style>
    .myClass {
        color: blue;
        font-size: 14px;
    }
</style>
<div id="myDiv" class="myClass"></div>
<script>
    var myDiv = document.getElementById("myDiv");
    myDiv.classList.add("myClass");
</script>

这样就会将动态添加的<div>元素应用名为myClass的CSS样式。

ID选择器：可以通过为动态添加的元素添加一个唯一的ID，并在CSS样式表中定义该ID的样式来应用于元素。例如：

<style>
    #myDiv {
        color: green;
        font-size: 18px;
    }
</style>
<div id="myDiv"></div>
<script>
    var myDiv = document.getElementById("myDiv");
    myDiv.id = "myDiv";
</script>

这样就会将动态添加的<div>元素应用ID为myDiv的CSS样式。

使用CSS伪类：可以使用CSS伪类来选择动态添加的元素的特定状态或行为，并为其定义样式。例如：

<style>
    #myDiv:hover {
        background-color: yellow;
    }
</style>
<div id="myDiv"></div>
<script>
    var myDiv = document.getElementById("myDiv");
    myDiv.addEventListener("mouseover", function() {
        myDiv.style.backgroundColor = "yellow";
    });
    myDiv.addEventListener("mouseout", function() {
        myDiv.style.backgroundColor = "";
    });
</script>

这样就会在鼠标悬停在动态添加的<div>元素上时，将其背景颜色设置为黄色。

以上是几种常见的方式，可以根据具体需求选择合适的方式来应用CSS样式于动态添加的元素。