如何使用 jQuery 在父节点的子节点中应用 CSS？

在 jQuery 中，我们可以使用 css() 方法在父节点的子节点中应用 CSS 样式。

语法

$(parent-selector).find(child-selector).css(property, value);

参数

• parent-selector：父节点的选择器。
• child-selector：子节点的选择器。
• property：CSS 属性名。
• value：CSS 属性值。

示例

假设我们有一个 HTML 页面，其中有一个父节点和一些子节点：

<div class="parent">
  <p>子节点 1</p>
  <p>子节点 2</p>
  <p>子节点 3</p>
</div>

现在，我们想在父节点的所有子节点中应用 CSS 样式，例如设置字体颜色为红色。我们可以使用以下 JavaScript 代码：

$(document).ready(function() {
  $(".parent").find("p").css("color", "red");
});

这会将所有 <p> 标签的字体颜色设置为红色。我们可以将 CSS 样式的任何属性与任何值配对，例如：

$(".parent").find("p").css("font-size", "18px");
$(".parent").find("p").css("background-color", "yellow");
$(".parent").find("p").css("text-align", "center");

这几行代码会将所有 <p> 标签的字体大小设置为 18 像素，背景颜色设置为黄色，文本居中对齐。

总结

使用 jQuery 在父节点的子节点中应用 CSS 非常简单。只需使用 find() 方法选择子节点，然后使用 css() 方法设置 CSS 样式属性和值。这是一种快速，简单和灵活的方式，可用于在 Web 页面中动态更改外观和交互行为。