我遇到了jQuery属性选择器的问题,我不明白为什么“Div 1”在这个例子中得到了绿色背景颜色。
$(document).ready(function() {
$('div[title],[style]').css('border', '5px solid red');
$('[title][style]').css('background-color', 'green');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div title="div1Title">
Div 1
</div>
<p title="p1Title">
Paragraph 1
</p>
<div style="background-color:yellow">
Div 2
</div>
<p title="p2Title" style="background-color:yellow">
Paragraph 2
</p>
答案 0 :(得分:2)
因为您的第一行导致style
属性添加div1
,所以此行
$('div[title],[style]').css('border', '5px solid red');
所以你的div1现在都有title
以及style
属性,所以下一行这个
$('[title][style]').css('background-color', 'green');
适用于它。
如果您不想将背景颜色应用于第一个div,只需切换线条的顺序
即可答案 1 :(得分:2)
这一行:
$('div[title],[style]').css('border', '5px solid red');
此行使用style属性的每个元素和每个具有title属性的div元素,并将其内联样式设置为具有边框。
它与div匹配,因为它具有title属性。
然后这一行:
$('[title][style]').css('background-color', 'green');
将标题和样式属性的每个元素的背景颜色设置为绿色。
它匹配div,因为它以title属性开头,而前一行添加了style属性。
答案 2 :(得分:0)
我无法理解为什么“Div 1”获得了绿色背景颜色
因为你的第一条规则,$('div[title],[style]').css('border', '5px solid red');
说选择所有具有title属性的div和所有具有attibute样式的元素,并为它们提供5px纯红色边框。 jQuery通过应用CSS内联来实现这一点,因此具有title属性的div现在也将具有内联样式属性。
此时,您的第二条规则$('[title][style]').css('background-color', 'green');
将选择包含标题和样式属性的所有元素,其中包括Div 1。
答案 3 :(得分:0)
很简单,这就是发生的事情:
1 -
$('div[title],[style]').css('border', '5px solid red');
在div
上设置不具有style
的内联样式,但具有title
或任何具有style
的元素,但设置为style
内联样式在div
上创建style
而不div
。
2 - 因此,
也选择了新设置style
的{{1}}
$('[title][style]').css('background-color', 'green');
你看到它们的绿色背景颜色。