0

我正在尝试使用 Jquery 库用 JavaScript 教自己基本的 html。使用下面的代码，我试图更改 div 红色内的 p 标签和 div 黄色之外的其他 p 标签。下面的代码将所有 p 标签更改为黄色，但是当我将 4. 放在 3. 之上时，它可以工作。只需要一个简单的解释为什么，这也是 html 代码http://imageshack.us/photo/my-images/29/k9do.jpg/ 

$(document).ready(function() {
    $("#testbutton").click(function() {
        $("div  p").css("background-color" , "red");
        $("p").css("background-color" , "yellow");
    });
});
4

10 回答 10

2

让我解释一下

$("div p").css("background-color" , "red");

上面的代码会将background-colordiv 标签内的所有 p 标签设置为红色。

现在，

$("p").css("background-color" , "yellow");

上面的代码将为background-color所有 p 标签设置黄色，标签内部和外部也是div如此。

现在，当你做相反的过程时，做

$("p").css("background-color" , "yellow");

将所有 p 标签设置为background-color黄色，首先在标签内部和外部div。

接下来，这样做

$("div p").css("background-color" , "red");

background-color为 div 标签内的所有 p 标签设置红色，但不为 div 外的 p 标签设置红色。因此，这是可行的，但不是第一种方式。

于 2013-07-05T09:18:18.620 回答
1

原因是：每个 JavaScript 语句都按照它们编写的顺序/顺序执行。

因此，在您的情况下，第一条语句将首先将div中所有 p 标签的背景颜色更改为红色。但是第二个语句会将所有p 标签的背景颜色更改为黄色。因此，第二条语句覆盖了第一条语句所做的先前更改。

这也解释了为什么当您更改这些行时，它会按预期工作。因为在这种情况下，第一条语句会将所有p 标签的背景颜色更改为黄色。然后，第二个语句将仅将 div 标签内的那些 p 标签的背景颜色更改为红色。

更新：或者，您可以使用以下内容：

$('p').each(function(){
    var clr = ('DIV' === $(this).parent()[0].nodeName) ? 'red' : 'yellow';
    $(this).css('background-color', clr);
});

此代码循环所有 p 标签，并根据其父元素的标签名称设置背景颜色。如果是 div，它将使用红色，否则使用黄色。这是一个演示：jsfiddle.net/3dL7r

于 2013-07-05T09:19:24.497 回答
1

你以错误的方式思考这个问题。如果这些样式方向都在 CSS 文件中，则div p方向将胜过p方向，因此内部<p>为红色，外部<p>为黄色。

然而，这不是我们在这里所做的。jQuery 在 CSS 初始加载之后运行，并且不关心（或需要关心）页面范围的 CSS 样式规则；我们使用 jQuery 所做的所有样式更改都将覆盖预设样式。

让我们看看你写了什么。你的第一个命令，

$("div p").css("background-color" , "#FF0000");

翻译成英语为“获取<p>标签内存在的所有标签<div>并将其背景颜色设置为红色”。你的第二个命令，

$("p").css("background-color" , "yellow");

获取所有 <p>标签（包括我们刚刚变成红色的标签）并将它们变成黄色。

于 2015-06-19T18:08:40.287 回答
0

这更多是关于 css 的特异性。在第 3 行中，您的选择器将a 内的div p所有内容设置为红色。在第 4 行中，您通过将all设置为黄色（无论它们是否在 a 中）来覆盖它。pdiv pdiv

于 2013-07-05T09:18:59.080 回答
0

4 ( "div p") 比 3 ( "div p") 更通用，因此如果将 4 放在 3 之后，您将首先将嵌套在 div 中的每个 p 着色为红色，但紧接着您将其着色为黄色，因为这就是您所说的在 4

于 2013-07-05T09:17:21.950 回答
0

jQueryscss()函数设置style属性。因此订单遮罩，因为两个调用都会在某些元素上设置该属性并相互覆盖。

于 2013-07-05T09:17:28.980 回答
0 
$("div p").css("background-color" , "red");

上面这行代码更改了嵌套在 div 下的 p(found)。它是css的语法。

$("p").css("background-color" , "yellow");

上面这行代码改变了在 HTML 的 DOM 中找到的所有 p 标签

于 2013-07-05T09:17:46.700 回答
0

第$("div p")3 行以 div 内的所有 p 标签为目标（即级联选择器 - 第二个标签必须在第一个标签内），而第$("p")4 行以所有段落标签为目标。拥有不同颜色的最佳方法确实是将 4 移到 3 之上 - 3 更具体。

于 2013-07-05T09:17:58.003 回答
0

您需要先p tags用 background 定义外部元素，如果在 p tags内部定义它，div它将用黄色替换该 div。

$("#testbutton").click(function() {
     $("p").css("background-color" , "yellow");
     $("div p").css("background-color" , "#FF0000");
});
于 2013-07-05T09:24:49.977 回答
0

用英语讲，

首先将<p>标签内的<div>标签涂成红色。其次，您将所有<p>标签都涂成黄色。所以当然会有黄色的。你必须记住，JavaScript中的样式在优先级方面 不像CSS 。JavaScript将CSS样式添加到 inlinestyle=""属性，因此唯一会覆盖样式的是您不!important应该使用的女巫。

因此，当您将 4 放在 3 之上时它起作用的原因是因为您将所有<p>标签都涂成黄色，然后专门将标签中的<div>标签涂成红色。

所以基本上在JavaScript中最后添加到元素的任何样式都会覆盖以前的样式，除非!important使用

于 2013-07-05T09:24:52.790 回答