使用javascript根据内容放置位置为元素应用Css

我有html内容，我需要根据放置在内容中的位置应用css

示例：我有两个页面，但两个页面加载的js文件相同。我只需要根据内容放置位置为一个页面应用css

我只需要将css（通用css）应用于第2页的测试内容。（id=testhave在主标记之后）

只使用javascript，不使用jQuery

//我只需要为第2页的测试内容应用css。（id=test have在主标记之后）。
var contentArea=document.querySelector（'.wp body:not（main>：not（.sample page））#test'）；
if（内容区）{
contentArea.style.color='red'；//颜色是动态数据
}

第1页：
ABCD
EFGH
第2页：
xxx
ABCD
EFGH

您需要将类添加到body标记中，然后为body.page2或body.page1的子级编写单独的css规则

.wp-body main #test {} //points only to the #test div on page1
.wp-body > #test {} //points only to the #test div on page2

$(".wp-body main #test").css()  //set the style for #test div on page 1
$(".wp-body > #test").css() // set the style for #test div on page 2

---

你为什么要用JS做这个？编写合适的CSS选择器。我正在处理现有的html页面。我只能添加js代码。你能在你的html中加载不同的.js或.css文件吗？不，两个文件加载相同的js和css文件。选择

#test

，并根据简单的检查是否其父元素是body元素对其进行处理…我需要使用java脚本添加样式。因为它是动态值，请检查我的html，.sample page div在测试内容之前关闭。也只有javascript。不是jqueryas因为你更改了html，所以我更改了选择器。仍然有不同的结构，所以你可以通过css选择器（也可以通过jquery选择器）来定位它。我认为这是个好主意，不知道为什么我不认为你的方法简单。谢谢