覆盖默认CSS样式

回到基础，我忽略了我的CSS技巧因而我的CSS是有点（非常）生疏我工作的一个WordPress主题。该主题的style.css默认H2风格编码如下：覆盖默认CSS样式

h2 { 
    font-size:1.7em; 
    background:url(images/heading_bg.gif) repeat top; 
    color: #fff; 
    padding:6px; 
    border-bottom:3px solid #e40001; 
    text-transform:uppercase; 
    font-family: 'Oswald', sans-serif; 
    font-weight:normal; 
}

这一结果在任何<h2>标签插入后看起来像这样：

这提供了一个漂亮的外观然而主题在某些情况下，我只是想有一个基本无样式<h2>标签因此我创建了以下类：

.normal{ 
font-size:1.4em; 
font-weight:bold; 
color="red"; 
font-family: 'Oswald', sans-serif; 
}

我的问题 - 我想实现

我想不过来覆盖在某些情况下，主题的默认<h2>风格，如果我上面的类添加到任何<h2>标签。中性类被忽略，它继续显示正常的h2规则 ....为什么是这样？我错过了什么？我如何覆盖某些类型的默认h2样式？

来源

2015-12-21 Timothy Coetzee

你会想看看CSS特异性规则。当存在像这样的冲突时，他们决定应用哪些样式。 – CollinD

尝试使用'h2.noraml'而不是'.normal'。 – Alex

@CollinD'你会想看看CSS的特殊性规则;你可以请扩展我不太明白你...？ –

你可以使用下面的代码：

h2.normal{ 
font-size:1.4em; 
font-weight:bold; 
color="red"; 
font-family: 'Oswald', sans-serif; 
}

这意味着H2具有分类标准则覆盖造型

来源

2015-12-21 05:52:02 Rovi

都能跟得上不起作用棍棒默认的样式，但感谢的答案 –

您可能需要添加CSS规则取代了'padding'和'background'与非风格化的版本等，不会被全局规则覆盖。 – CollinD

确保将此css文件添加到wordpress主题的继承样式下面 – Rovi

您可以执行下列操作之一：

使用.normal选择后h2在你的CSS文件（假设他们有相同的特异性）
ü SE !important在.normal decleration
```
.normal{ propert: value !important; } 
```
添加一些特异性的.normal选择，如：
```
h2.normal{ bla bla ...} 
```

来源

2015-12-21 05:59:19 Trix

这是我摸索出了片段。对我来说这似乎不成问题。仔细阅读此代码。

PS：color="red";是错误的。当你想重写某个元素时使用，你必须查看该元素中使用的规则。也就是说，你必须去除背景如有变动保证金，填充等

color:red;

h2 { 
 
    font-size: 1.7em; 
 
    background: url(http://i.stack.imgur.com/pOVzy.jpg) repeat top; 
 
    color: #fff; 
 
    padding: 6px; 
 
    border-bottom: 3px solid #e40001; 
 
    text-transform: uppercase; 
 
    font-family: 'Oswald', sans-serif; 
 
    font-weight: normal; 
 
} 
 
.normal { 
 
    font-size: 1.4em; 
 
    font-weight: bold; 
 
    color: red; 
 
    font-family: 'Oswald', sans-serif; 
 
    background: none; 
 
}

<h2> 
 
hello 
 
</h2> 
 

 
<h2 class="normal"> 
 
    Hello World 
 
</h2>

来源

2015-12-21 06:10:13

尽可能避免使用！重要标签。这是一个糟糕的做法。 –

您应该提到的h2所有的CSS属性在.normal类，因此这将是什么像这样：

.normal { 
    font-size:1.4em; 
    background:none; 
    color: #FF0000; 
    padding:0px; 
    border-bottom:none; 
    text-transform:initial; 
    font-family: 'Oswald', sans-serif; 
    font-weight: bold; 
}

来源

2015-12-21 06:18:14 Chyngyz

这是唯一的理智答案。 –

覆盖默认CSS样式

回答

相关问题