我的 Drupal 主题生成:
<div class="field1">
Field 1
</div>
<div class="field2">
<h3>Field 2</h3>
</div>
结果是Field 2
另一种风格。
如何消除h3
使用 CSS 的影响?
更好的方法 - 删除 h3 标签。但有时,当您需要重置父元素的所有样式时 - 使用全局属性,例如“font-size”的“font”、“font-style”等...继承填充、边距、边框和背景样式的警告- 这可能看起来很难看。例如,当您的元素具有填充和边框时,每个元素都会重复:)
.someclass * {
font: inherit;
color: inherit;
/* optional reset */
background: transparent;
border: none;
margin: 0;
padding: 0;
}
您可以按如下方式访问 h3:
.field2 h3{ //style here }
这将更改具有 field2 类的元素内任何 h3 的样式。如果您想更加具体:
div.field2 > h3 { //style here }
这只会更改 h3 元素的样式,该元素是具有 field2 类的 div 的第一级后代。我建议您查看 CSS 选择器。
要删除任何现有效果,您必须覆盖它们。这可以通过将值设置回元素的默认值来完成。
您只能通过将属性设置为它们在<h3>
应用样式之前具有的任何值来“删除”效果。例如,您可以使用重置字体大小
.field > h3 {
font-size: medium;
}
您需要对所有由您的 CSS 或浏览器的内部样式表修改的属性执行此操作,但有一些帮助:现代开发工具(例如 Chrome 的)将允许您检查一个元素并向您显示它具有哪些属性和它们来自哪里(所以你可以看到它font-size
已经被修改了)。查看适当的 CSS 标准将向您展示这些属性中的每一个的默认值是什么(例如font-size
is here)。
习惯了这个
像这样
.field2 h3{
color:black;
font-size:20px;
}
You cannot remove the effects of tags in CSS, except by writing CSS code that overrides stylistic settings that elements have due to browser defaults or other settings.
For an h3
element, the properties that are probably set in browser default style sheets are display
, unicode-bidi
, font-size
, font-weight
, margin
, and page-break-after
. (Cf. to Appendix D of the CSS 2.1 spec, Default style sheet for HTML 4.) You can set these to the desired values, and even a simple selector will suffice, e.g.
h3 { font-size: 120%; font-weight: normal; margin: 0; }
However, other style sheets that affect your document may have other settings on h3
. And there is really no law against browser default style sheets using e.g. colors for headings or setting a specific font family.
To override other CSS settings in general, you need to use CSS rules with a sufficiently specific selector.