如何在我的网站 html 中选择此 DIV？ [关闭]答案

【问题标题】：How to select this DIV in my website html? [closed]如何在我的网站 html 中选择此 DIV？ [关闭]
【发布时间】：2021-04-01 21:26:10
【问题描述】：

正如您在图片中看到的，我如何在 css 中选择突出显示的 div 元素？我在页面的其他块中有带有 w-grid-item-h 的 div，所以我不能直接使用它来更改 css。这是我的 wordpress 主题的输出，所以我无法为其指定所需的类名！

【问题讨论】：

1- 尝试发布代码而不是图像，2- 在您的浏览器中，您可以在下面看到用于突出显示 div 的 selector。
您显然正在使用一个 UI 库，该库提供了一些 CSS 类来设置其组件的样式。为了让您进行任何手动更改，或在其模板中选择特定元素，您需要为包含此 div 的父元素提供自定义类或其他标识符。问题太笼统，很难给出具体答案。

标签： html css wordpress

【解决方案1】：

找到最近的具有 ID（应该是唯一的）的父元素并向下遍历到您的目标元素

#us_grid_2 > .w-grid-list > article > .w-grid-item-h {
  color: #f00;
}

如果您知道不会有任何其他元素匹配相同的层次结构，您可以使用更简单的方法并让浏览器自行搜索所有后代

#us_grid_2 .w-grid-item-h {
  color: #ff0;
}

【讨论】：

如果us_grid_2是自动生成的，下次他更改模板中的布局时，该ID可能会自动生成为不同的名称，这可能会破坏此CSS规则...

【解决方案2】：

如果该 div 非常特别，只需给它一个 id 并在您的 CSS 中使用该 id。

<div class="w-grid-item-h" id="my-very-special-div"></div>

#my-very-special-div {
  color: pink;
}

【讨论】：

也就是说，如果他可以直接访问那些 DOM 元素。有时它们是由模板生成器在运行时呈现的，他无法在 HTML 中修改它们。
可以用一个额外的类而不是 id 来解决吗？
问题不在于他应该使用的 CSS 选择器的类型，而在于他是否可以更改 HTML 开头。如果这个模板是在运行时使用一些 UI 框架（如 Vue / React / Angular）在 DOM 中自动生成的，那么实现它可能会很棘手。你在 DOM 中看到的并不总是你提供给浏览器的同一个模板 :)
啊，我明白你的意思了。但是我不知道使用模板引擎操作输出HTML实际上很难......
鉴于我们显然是生成 HTML 的人！

【解决方案3】：

我们需要整个文档来确保选择器是唯一的。我将首先按类.w-grid-item-h 进行选择。这可能会选择您每篇文章中的 div。如果你只想要第一个然后上树（可能直到你找到一个具有合适 id 的父级）并使用 :first-child、:first-of-type 等。你的 data-id 属性在这里也可能有用. article[data-id=182] div 另外，如果您可以控制服务器端，请不要忽略生成合适的 id 属性的选项。

【讨论】：