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是否在同一个元素上？然后删除它们之间的空格，如＃myid.myclass，如果该类用于元素内的子元素，其中id使用它们之间的空格。希望这会对你有所帮助。

Answer 2

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

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

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

看看下面的代码。希望这会有所帮助。

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

仅更改指定标识的css类

2 个答案: