为div标签添加边框出现额外线条的原因及选择器使用疑问

问题根源 #

你写的CSS里，div选择器的规则块结尾多了一个多余的分号（写成了};），这属于CSS语法错误，导致浏览器无法正确解析这个div的样式规则，才出现了异常的边框线条。

修正后的CSS代码 #

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

div {
    border: 1px solid black;
    margin: 30px;
    padding: 30px;
}

关于“为何不能直接用div标签选择器”的解答 #

不是不能用div标签选择器，而是你之前的CSS存在语法错误，导致div选择器的样式没被正确识别。修正那个多余的分号后，div标签选择器完全可以正常生效，效果和你用类选择器是一样的。

CSS里每个样式规则块只需要用}结尾就行，不需要额外加分号，多余的分号会被浏览器判定为无效语法，进而影响样式解析。

内容的提问来源于stack exchange，提问作者Souvik