使用jQuery修改父元素为article的p元素文字颜色无效如何解决？

算力阿峰

2026-10-1

DOM未加载完成就执行代码
这是最常见的原因，如果你的JS代码放在<head>标签内，或者位置在<article>元素的前面，代码执行时目标元素还没被浏览器渲染，自然无法匹配到元素，这也能解释你用$("p")全局匹配都不符合预期的情况。
解决方法：将代码包裹在DOM加载完成的回调中：
```
// 标准写法
$(document).ready(function() {
  $("article p").css("color", "#ffffff");
});
// 简写写法
$(function() {
  $("article p").css("color", "#ffffff");
});
```
选择器匹配规则错误
你使用的article > p是匹配article的直接子元素p，如果你的p元素外面还有其他嵌套标签（比如<div>、<section>等），不是article的直接子级，就会匹配失败。
解决方法：去掉直接子级限制，匹配所有article下的p元素：
```
$("article p").css("color", "#ffffff");
```
动态生成的元素未等待渲染完成
如果你的<article>或者内部的p元素是通过接口请求、前端模板渲染等方式动态生成的，你需要保证代码在动态内容渲染完成之后再执行，而不是页面初始加载就执行。
$符号冲突
如果页面中引入了其他占用$符号的JS库，会导致jQuery的$无法正常使用。
解决方法：用jQuery代替$测试：
```
jQuery("article p").css("color", "#ffffff");
```