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

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

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

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

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