如何识别特定 DIV 的 ID，以便向其添加背景图像？

问题描述

我买了一个 Joomla 模板，但我没有订阅支持，所以我需要自己修改样式。

1. 我想更改左侧突出显示的“紫罗兰”的背景，带有图像背景。
2. 图片左侧是代码。
3. 我想放置一个 CSS 覆盖来放置图像背景。

enter image description here

解决方法

“紫罗兰色”div 没有 id；但它的父母确实如此。您不需要 Id 来匹配元素；一个独特的班级/班级组合就足够了。 为了安全起见，您可以按父 ID 和子类进行选择：

#gkHeader > .box.mediumspaces.greybg {
  background-image:url(someimage.jpg);
  background-repeat: no-repeat;
}

• #gkHeader : id 为 gkHeader 的项目；
• > ：直接子项（前一个选择器的直接子项）
• .box.mediumspaces.greybg : 所有类用点分隔

如果您的子 div 没有独特的类组合可以让您选择一个，您仍然可以使用位置选择器来实现：

#gkHeader > div:nth-child(3)

哪里：

• #gkHeader > div 选择 <div id="gkheader">
的所有直系后代
• :nth-child(3) 选择集合中的第三项

请注意空格，

• .class1 .class2 正在选择一个 class="class2" 包含在另一个 class="class1" 中的项目；
• .class1.class2 正在选择带有 class="class1 class2"
的项目

如果您的规则不起作用，但您在浏览器检查器中看到它，则可能存在具有更相关选择器的规则；如果是这样，请在您的选择器中更具体（添加更多父项，或使用 ID 而不是类），或在样式后添加 !important