我正在尝试选择和编辑在<span>中找到的ID为<div>的所有三个单独的#calendarWidget元素。我已经可以使用querySelector和innerHTML选择三个中的两个。
这是我的代码：
window.onload = function() {
document.querySelector('#calendarWidget > div > table > tbody > tr > td > span').innerHTML="<span style='color:white; background:#3A87AD; padding: 0 5px; border-radius:2px'>Available Sessions</span>";
document.querySelector('#calendarWidget > div > table > tbody > tr > td > span:nth-child(2)').innerHTML="<span style='color:white; background:#A5CF48; padding: 0 5px; border-radius:2px'>Registered Sessions</span>";
document.querySelector('#calendarWidget > div > table > tbody > tr > td > span:last-child').innerHTML="<span style='color:white; background:#8a8a8a; padding: 0 5px; border-radius:2px'>Past Sessions</span>";
};
此代码选择并编辑第一个和最后一个<span>元素，而不是中间元素。
我尝试将:nth-child(2)添加到第二个<span>元素，但这没有用。
是否可以进行这项工作，如果可以，我该怎么做？