html - 仅更改指定 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>