css只生效一次 |html和css视频

var btn = document.getElementById('btn');
btn.addEventListener('click', function(){
var div = document.createElement('div');
div.innerHTML = 'Hello World!';
div.classList.add('highlight');
document.body.appendChild(div);
});

这段代码会在页面中添加一个按钮，当大家点击按钮时，它会动态添加一个带有“Hello World!”文本内容的div元素，并给它添加了一个highlight类。大家再来看看CSS代码：

.highlight {
background-color: yellow;
border: 1px solid black;
}

这段CSS代码的作用是给highlight类的元素设置背景色为黄色，边框为黑色。但是，当大家点击按钮后，发现新添加的div元素没有出现黄色背景和黑色边框，而只是显示为普通的文本内容。这是为什么呢？

这是因为这个元素是通过JavaScript动态创建的，而CSS只有在页面加载时才会解析和应用。因此，动态添加的元素在CSS解析时并不存在，它并不会被CSS所影响。

那么，怎样才能让CSS对这些动态添加的元素生效呢？方法有两种：

一种是在动态创建元素时，手动给它设置样式。大家可以修改JavaScript代码：

var btn = document.getElementById('btn');
btn.addEventListener('click', function(){
var div = document.createElement('div');
div.innerHTML = 'Hello World!';
div.style.backgroundColor = 'yellow';
div.style.border = '1px solid black';
document.body.appendChild(div);
});

这样，大家手动给新添加的元素设置了样式，它就可以显示出预期的效果。

另一种方法是使用CSS的委托机制（或称为事件委托）。大家可以在CSS中使用伪类选择器来对动态添加的元素进行样式设置。大家修改CSS代码：

.highlight,
div:empty {
background-color: yellow;
border: 1px solid black;
}

现在，大家给新添加的div元素加上了一个:empty伪类选择器，它的作用是选择所有没有子元素的div元素。当div元素被动态添加到页面中时，它是没有子元素的，因此它就会被应用这个CSS样式。

总结：

CSS只会在页面加载时解析和应用。动态添加的元素在CSS解析时并不存在，因此它们不会受到CSS的影响。解决这个问题的方法通常有两种：手动给动态添加的元素设置样式，或使用CSS的委托机制对动态添加的元素进行样式设置。