jquery - 使用 jquery 应用类样式，但并非所有样式都在应用

Question

我正在尝试使用 jquery 应用 CSS 类样式的一些初学者操作。我正在设置两个类属性，颜色和字体大小。两者都在 .zebra 类下定义，但仅应用颜色。

jQuery脚本：

$(document).ready(function() {
alert('Script is tied in!');
$('#lion').addClass('zebra');
});

CSS

p {
color: #CC34H8;
font-size: 100px;
}

.zebra {
color: #2FB51D;
font-size: 12px;
}

EJS，此时仍然基本上是直接的 HTML 标记

<body>
hello hello
<p> hi </p>
<div id="lion">
    <p> hey hey </p>
</div>
</body>

CSS中的颜色属性正在改变，但字体没有改变（仍然显示为原始<p>定义样式的100px。为什么只有一个属性受到影响？

score 3 · Accepted Answer

您正在将类设置为，#lion但该font-size属性被p标签覆盖。

以下 jQuery 行将为您工作：

$('#lion p').addClass('zebra');

score 1 · Accepted Answer

您的 JS 代码是正确的，除了一件事。

您正在将类.zebra应用于div.lion标签p本身，因此标签内的文本从父级p获取，从它的 css 获取。colordivfont-size

这就是为什么color只改变了。

将您的代码更改为：

$('#lion p').addClass('zebra');//notice " p".

score 1 · Accepted Answer

你没有改变class标签<p>，它仍然有font-size:100px.

$(document).ready(function() {
    $('#lion p').addClass('zebra');
});

3 回答 3