当有几个元素具有相同的id时,如
<div id="red">1</div>
<div id="red">2</div>
<div id="red">3</div>
<div id="red">4</div>
<div id="red">5</div>
他们会都响应在css文件中对该id的描述,如
<style>
div {
width: 200px;
height: 100px;
margin-top: 20px;
}
#red {
background-color: red;
}
</style>
此时浏览器显示为
但如果在js中使用id选择器来改变样式,只有第一个具有对应id的元素会响应这个改变
<script>
function btnclick() {
$('#red').css("background-color", "blue")
}
</script>
此时浏览器显示
如果想要所有具有相同id的元素都响应,则可以使用属性选择器
function btnclick2() {
$('div[id="red"]').css("background-color", "blue")
}
此时浏览器显示