javascript - 使用 jquery 加载的页面的 CSS 属性继承性

我的代码

style.css

input.button, input.submit, button, .button{
color:blue;
}

index.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$("#princ").html('Loading...');
$("#princ").load('page.php', function (responseText, textStatus, req) {
   if (textStatus == "error") {
      $("#princ").html('An error occurred!');
   }
});
</script>
<div id="princ"></div>

page.php

<input type="text"><input type="button" value="Send">

我的代码应该做什么

如果从 index.php 加载，则将按钮着色为蓝色。

什么不起作用

未应用 CSS 属性。

我想做什么

我多次尝试修改css代码，发现这段代码:

input{
color:blue;
}

显示两个<input> page.php 的颜色为蓝色:这意味着在 CSS 文件中设置的属性被 page.php 接收

我的问题

我应该期待这种行为吗？我怎样才能达到我的目标？

最佳答案

您的问题是您的 CSS 没有指定页面上的按钮。你现在有

input.button, input.submit, button, .button { color: blue; }

这将为具有“按钮”类或提交类或任何button元素或具有的任何元素的input着色一类“按钮”。但是，您在 page.php 中的 input 没有类，因此不会被此 CSS 规则捕获。

您可以将 page.php 更改为以下内容，这会将“按钮”类添加到您的输入按钮。

<input type="text"><input type="button" value="Send" class="button">

不过你有一个替代方案，你可以更改你的 CSS 规则以捕获具有“提交”类型的 input，如下所示:

input.button, input.submit, button, .button, input[type=submit] { color: blue; }

你的按钮也应该显示为蓝色。

如果这有帮助，请告诉我。

关于javascript - 使用 jquery 加载的页面的 CSS 属性继承性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25512034/