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。为什么只有一个属性受到影响？

Answer 1

您正在将班级设置为#lion，但font-size标签正在覆盖p媒体资源。

以下jQuery行适合您：

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

Answer 2

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

您正在将课程.zebra应用于div.lion而不是标记p本身，因此标记p内的文字会从父级获取color来自它的div和font-size来自css。

这就是为什么只更改color的原因。

将您的代码更改为：

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

Answer 3

您没有更改class代码的<p>，但仍然有font-size:100px。

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