jQuery属性选择器问题

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属性的元素和每个div具有title属性的元素设置为行内样式，以具有边框。

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

然后这行：

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

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

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

Answer 3

我不明白为什么“ Div 1”具有绿色背景色

因为您的第一个规则是$('div[title],[style]').css('border', '5px solid red'); 说选择所有具有标题属性的div和所有具有样式属性的元素，并为其赋予5px的红色实线边框。 jQuery通过应用CSS内联来做到这一点，因此具有title属性的div现在也将具有内联样式属性。

此时，您的第二条规则$('[title][style]').css('background-color', 'green'); 将选择所有具有title和style属性的元素，其中包括Div 1。

Answer 4

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

1-

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

设置上的内嵌样式div不含有S style ，但要么title或具有任何元素style ，但设置内嵌式的创造style上div没有小号style 。

2-因此，那些具有新设置style div也会由

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

您会看到它们上的绿色背景色。