Question

我有一个元素的id，css如此：

 #red {
     background-color: #2ac0a3;
     border-top-left-radius: 5px;
     border-bottom-left-radius: 5px;
     position: relative;
     bottom: 220px;
     left: 365px;
 }

我想在#red div中添加一个类来覆盖位置，但它似乎不起作用。有什么想法吗？

JS：

$('#red').addClass('ya');

CSS

.ya{
position: relative;
left: 900px;
}

谢谢！

Answer 1

ID的优先级高于类。要覆盖ID样式，您需要一个更具体的选择器：

.ya, #red.ya {
    position: relative;
    left: 900px;
}

Answer 2

“id”（#red）中的值比类（E.G.“。yya”）更具体。因此，“id”中设置的CSS规则优先（I.E.是应用的规则）。

如果您内联的属性将更加具体，因此优先于“id”规则。内联含义将值添加为“样式”属性。

 <sometag style="position: relative;left: 900px;" </sometag>

使用类似

的JQuery

$('#red').attrib('style','position: relative;left: 900px;');

希望有所帮助。

Answer 3

不要忘记可以使用任何CSS设置的！important标志。

例如：

#red {
  background-color: #2ac0a3;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  position: relative;
  bottom: 220px;
  left: 365px;
}

...可以被以下方式覆盖：

.ya {
  position: relative !important;
  left: 900px !important;
}

这有一些优点，可以保证您的CSS干净整洁，并且当您需要进入并更改或添加到其中时更容易管理。

此外，这里有一个演示概念的小提琴： http://jsfiddle.net/WDgNF/

覆盖类定位的id

3 个答案: