如何基于父元素类定义CSS选择器为指定子div设置背景图？

看起来你的选择器逻辑出错啦——你把mainmenuitem和x-treelist-row-over当成了嵌套的父子类，但实际上这两个类是同一个父元素上的并列类，这才是导致样式不生效的核心原因。

先梳理你的HTML结构 #

你的目标父元素同时拥有多个类，后代层级是明确的：

<div class="x-treelist-row mainmenuitem x-treelist-row-over" id="ext-element-283">
  <div class="x-treelist-item-wrap" id="ext-element-258">
    <div class="x-treelist-item-icon menu-po-trek" id="ext-element-281"></div>
    <div class="x-treelist-item-text" id="ext-element-280">Po</div>
    <div class="x-treelist-item-expander"></div>
  </div>
</div>

正确的CSS选择器写法 #

把同一个元素上的多个类写在一起（没有空格，表示“同时拥有这两个类的元素”），再通过后代选择器定位目标子元素：

.mainmenuitem.x-treelist-row-over .menu-po-trek {
  height: 64px;
  vertical-align: middle !important;
  background-size: 44px 33px;
  background-image: url("/icons/pltx2/po.png") !important;
  background-repeat: no-repeat;
  background-position: center;
}

可选的精确写法（更严谨） #

如果想要避免意外匹配其他嵌套的同类元素，可以用直接子元素选择器>锁定层级：

.mainmenuitem.x-treelist-row-over > .x-treelist-item-wrap > .menu-po-trek {
  /* 样式代码同上 */
}

这个写法只会严格匹配「父元素→x-treelist-item-wrap→menu-po-trek」这条层级链的元素，适合结构复杂的页面场景。

内容的提问来源于stack exchange，提问作者Jens H