仅更改指定 id 的 css 类

Question

我尝试重写复杂控件（dxList）DevExtreme 的一些基本类，并且工作正常。

.dx-loadpanel-content {
    transform: translate(0px, 0px) !important;
    margin: auto !important;
    left: 0px !important;
    top: 0px !important;
    position: absolute !important;
}

.dx-scrollview-loadpanel {
    transform: translate(0px, 0px) !important;
    margin: auto !important;
    left: 50% !important;
    top: 50% !important;
    position: absolute !important;
}

但这对我来说不是一个好主意，因为此类已经在不同的 html 页面上使用。

我只想通过某个 id 为指定的 dxList 覆盖此类。像这样：

#activitiesList .dx-loadpanel-content {
    transform: translate(0px, 0px) !important;
    margin: auto !important;
    left: 0px !important;
    top: 0px !important;
    position: absolute !important;
}

#activitiesList .dx-scrollview-loadpanel {
    transform: translate(0px, 0px) !important;
    margin: auto !important;
    left: 50% !important;
    top: 50% !important;
    position: absolute !important;
}

但没有任何效果。怎么了？

Answer 1

如果ID和class属于同一个元素，则需要在CSS中删除两者之间的空格。

如果有空格，CSS 将查找与选择器第一部分匹配的所有元素，然后在这些元素内部查找与选择器第二部分匹配的元素。

如果没有空格，CSS 将查找具有选择器第一部分和选择器第二部分的所有元素（例如，匹配 ID 和类）。

看看下面的代码。希望这可以帮助。

/* Target all elements with the Class of 'c' that are inside elements with the ID of 'i' */
#i .c {
  background: red;
}


/*Target all elements with the ID of 'i' AND the Class of 'c'*/

#i.c {
  background: yellow;
}

<div id='i'>
  <div class='c'>
    ID and Class on different divs. Space in CSS.
  </div>
  <div class='b'>
    This is not targeted because class b was not selected in CSS
  </div>
</div>

<div id='i' class='c'>
  ID and Class on the same div. No space in CSS.
</div>