【问题标题】:Overriding css style?覆盖css样式?
【发布时间】:2013-10-18 15:11:21
【问题描述】:

我查看 Stack Overflow,并没有找到解决方案,如果样式存在,我知道如何覆盖样式,只需更改其属性。但是现在我有一种奇怪的风格可以覆盖

这是我所拥有的示例

首先我有这个:

.slikezamenjanje img{
    max-width: 100%;
    max-height:150px;
    padding-right:7px;
}

现在我需要用这个来覆盖那个样式:

#zoomTarget .slikezamenjanje img {
    max-width: 100%;
}

问题是第一种样式追加了第二种,但我不希望这样,在第二种样式中我只需要一行,而不是从第一种样式追加?

【问题讨论】:

  • 这是一个地狱般的类名。

标签: css styles overriding


【解决方案1】:

您可以向元素添加另一个类,而不是覆盖,然后您就拥有了额外的能力。 例如:

HTML

<div class="style1 style2"></div>

CSS

//only style for the first stylesheet
.style1 {
   width: 100%;      
}
//only style for second stylesheet
.style2 {
   width: 50%;     
}
//override all
.style1.style2 { 
   width: 70%;
}

【讨论】:

  • 我用这个得到了什么,什么都没有,在第二种风格中我需要覆盖 max-height:150px;填充权:7px;什么都没有!
  • 现在我明白了,Gorostas,看看我的帖子。
  • Maby 而不是覆盖 css 尝试向元素添加另一个类,然后使用 css。
【解决方案2】:

您只需将您不想要的值重置为默认值。使用!important 无需陷入混乱。

#zoomTarget .slikezamenjanje img {
    max-height: auto;
    padding-right: 0px;
}

帽子

我认为您缺少的关键数据是 CSS 带有 默认值。如果要覆盖某个值,请将其设置回默认值 which you can look up

例如,所有 CSS heightwidth 属性默认为 auto

【讨论】:

  • 仍然得到这个最大宽度:100%;探测?
  • 你不应该需要!important,因为#zoomTarget .slikezamenjanje img.slikezamenjanje img更具体
猜你喜欢
  • 1970-01-01
  • 2021-09-08
  • 2012-12-08
  • 1970-01-01
  • 2022-07-02
  • 2022-01-21
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多