div后引用js文件对此div的css选择器有什么影响

Question

1. html

<div class="chart-box clearfix">
    <!-- chart1 -->
    <div class="chart fl" id="chart-ld"></div>
    <script type="text/javascript" src="js/chart1.js"></script>    
    <!-- chart2 -->    
    <div class="chart fl" id="chart-yx"></div>
    <script type="text/javascript" src="js/chart2.js"></script>
</div>

2.css

.chart{
    position:relative;
    box-sizing:border-box;
    width:calc(50% - 5px);
    padding:20px 10px;
    border:1px solid #ddd;
    margin-right:10px;
    }
    
.chart:last-child{
    margin-right:0
    }

我在一个.chart这两个div后引了js后，.chart:last-child{margin-right:0}就不生效了
（js是一个echart的图表配置文件，并未有其他的样式操作）
请问这是为什么？
直接在div后插入这样的js会破坏dom结构么？选了不了last-child了？
感谢各位的解答，谢谢~

Answer 1

因为 script 变成了 last child 了啊= =
因为 script 也是一个元素，会使得原来是last-child的div失去last-child的地位

Answer 2

.chart:last-child选择器的意思是选择class包含chart的元素并且这个元素是父元素的最后一个元素；
script也是html的元素，所以添加script元素之后，div的最后一个元素变成了script元素，所以.chart:last-child并不能匹配到任何元素，所以这条CSS就失效了。

Answer 3

为什么js引用要放在div里面？我第一次见。。。。

Answer 4

script也是一个html标签元素。

Answer 5

会对dom解构产生影响
script也是html标签所以.chart:last-child 选择的实际是

<script type="text/javascript" src="js/chart2.js"></script>