Question

我目前正在使用http://meyerweb.com/eric/tools/css/reset/作为我的顶级CSS。假设我无法改变这一点。

所以我的顶级CSS级别是这样的：

base.css

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline; 
}

div .target {
  ...
}

的index.html

  <body>
   <div class="target">
      <strong>Please make me bold</strong>
      <i>Please make me italic</i>
   </div>
  </body>

由于某种原因，font: inherit;不允许将格式元素应用于我的内容，即<strong>，<i>等。我希望我可以在{{}}中使用这些格式化html标记{1}}并使用CSS的当前结构正确渲染它们。有没有可能的方法来编辑.target以便这样做？

jsFiddle ：https://jsfiddle.net/y4c3c9cb/6/

注意：无法移动，编辑顶部选择器（div p），并且必须保持在顶级位置。

编辑我的html, body, div,...元素中的儿童可以是.target，i，strong元素。

编辑2 ：更改了HTML

Answer 1

似乎你的css设置了强大的元素来继承字体，所以它将继承与p相关联的字体，这是非粗体。

为strong添加font-weight：bold。

Answer 2

重置意味着您自己为所有这些标记设置规则。由于它包含strong { font: inherit; }，您必须添加

strong {
  font-weight: bold;
}

同样的斜体：

i {
  font-style: italic;
}

...还要完成重置规则中所有其他标记的规则，否则一切看起来都一样。

更新小提琴：https://jsfiddle.net/6nuogzg4/1/

Answer 3

尝试使用font-weight:bold;。更新了小提琴：https://jsfiddle.net/y4c3c9cb/3/

Answer 4

不要使用这个绦虫。使用：

* {
 padding: 0;
 margin: 0;
 border: 0;
 vertical-align: baseline;
}

代替。

顶级CSS选择器不对子元素应用格式

4 个答案: