我正在使用模板,标题位于div
内。我想将h1
应用于标题,但它会变坏(div
使用css设置样式,并且h1
没有样式)
通常情况就是这样:
<div class="content-pagetitle">Title</div>
我要改为:
<div class="content-pagetitle"><h1>Title</h1></div>
但它变坏了。
我尝试为content-pagetitle
使用相同的样式h1
。它不起作用
<h1>Title</h1>
(它与content-pagetitle不相同)
是否有css代码显示“不对h1
应用任何样式”?
答案 0 :(得分:5)
可能会尝试删除H1
h1 { margin:0; padding:0 }
我鼓励您探索dom(通过firebug或任何等效物品)并查看哪些样式适用于H1
。您可能需要一个更具指定的选择器才能将上述规则应用于特定的h1
元素。
答案 1 :(得分:4)
浏览器具有尝试合理显示有效HTML文档的默认样式,即使它没有附带的CSS也是如此。这通常意味着h1元素将获得额外的填充,大字体大小,粗体字体重等等。
处理这些问题的一种方法是使用reset stylesheet。这可能是矫枉过正的,所以你可能只想使用firebug或其他东西来识别你要杀死的特定样式,并覆盖它们。
如果您在覆盖样式时遇到问题,请添加更多选择器以添加更多specificity。
答案 2 :(得分:3)
是否有css代码说“不要对h1应用任何样式”?
不是这样,不。 但是...... 的
您可以做的是将'inherit'指定为h1
属性的值。但这并不适用于所有情况。假设:
div#content-pagetitle {
background-color: #fff;
color: #000;
font-size: 2em;
font-weight: bold;
}
h1 {
background-color: inherit; /* background-color would be #fff */
color: inherit; /* color would be #000 */
font-size: inherit; /* font-size would be 2*2em (so 4* the page's base font-size) */
font-weight: inherit; /* font-weight would be bold */
}
通过使用:
,可以增加选择器的特异性div#content-pagetitle > h1
或
div#content-pagetitle > h1#element_id_name
答案 3 :(得分:1)
我知道这是一个老帖子,但这就是我要做的......
像往常一样定义所有h
标签,然后针对特定样式,执行类似
<h1 class="specialH1"> ... </h1>
和你的css
h1.specialH1 (
/* style attributes */
)
我认为这是一个干净的解决方案,可以让您完全控制,而无需更改或重置默认的h
标签。
它还避免使用任何选择器增加类型黑魔法巫术xD
无论如何......只是我的意见......希望这有助于任何人