Question

我遇到了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>

Answer 1

因为您的第一行导致style属性添加div1，所以此行

$('div[title],[style]').css('border', '5px solid red');

所以你的div1现在都有title以及style属性，所以下一行这个

$('[title][style]').css('background-color', 'green');

适用于它。

如果您不想将背景颜色应用于第一个div，只需切换线条的顺序

即可

Answer 2

这一行：

$('div[title],[style]').css('border', '5px solid red');

此行使用style属性的每个元素和每个具有title属性的div元素，并将其内联样式设置为具有边框。

它与div匹配，因为它具有title属性。

然后这一行：

$('[title][style]').css('background-color', 'green');

将标题和样式属性的每个元素的背景颜色设置为绿色。

它匹配div，因为它以title属性开头，而前一行添加了style属性。

Answer 3

我无法理解为什么“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。

Answer 4

很简单，这就是发生的事情：

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');

你看到它们的绿色背景颜色。

jQuery属性选择器问题

4 个答案: