html - 为什么and不起作用？

Answer 1

因为reset.css样式表font: inherit;覆盖了浏览器的 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;}

Answer 2

重置样式表有font: inherit;一个选择器，该选择器匹配许多不同的东西，包括b和i。font包括font-weight，font-style因此它将这些设置为父元素的值。

Answer 3

您在第 19 行的 reset.css 中inherit为标签设置了“字体” 。删除 b 标签或为其添加新选择器以更改字体粗细。b

Answer 4

当您使用 CSS Reset 时，它会重置所有样式。现在您需要使用 CSS UnReset。我推荐使用Vanilla CSS Un-Reset。

完整的代码在这里给出：

/**
 * Start Vanilla CSS 1.0.2 
 */ 
body {
    font: 9pt/1.5em sans-serif;
}
pre, code, tt {
    font: 1em/1.5em 'Andale Mono', 'Lucida Console', monospace;
}
h1, h2, h3, h4, h5, h6, b, strong {
    font-weight: bold;
}
em, i, dfn {
    font-style: italic;
}
dfn {
    font-weight:bold;
}
p, code, pre, kbd {
    margin:0 0 1.5em 0;
}
blockquote {
    margin:0 1.5em 1.5em 1.5em;
}
cite {
    font-style: italic;
}
li ul, li ol {
    margin:0 1.5em;
}
ul, ol {
    margin:0 1.5em 1.5em 1.5em;
}
ul {
    list-style-type:disc;
}
ol {
    list-style-type:decimal;
}
ol ol {
    list-style: upper-alpha;
}
ol ol ol {
    list-style: lower-roman;
}
ol ol ol ol {
    list-style: lower-alpha;
}
dl {
    margin:0 0 1.5em 0;
}
dl dt {
    font-weight:bold;
}
dd {
    margin-left:1.5em;
}
table {
    margin-bottom:1.4em;
    width:100%;
}
th {
    font-weight:bold;
}
th, td, caption {
    padding:4px 10px 4px 5px;
}
tfoot {
    font-style:italic;
}
sup, sub {
    line-height:0;
}
abbr, acronym {
    border-bottom: 1px dotted;
}
address {
    margin:0 0 1.5em;
    font-style:italic;
}
del {
    text-decoration: line-through;
}
pre {
    margin:1.5em 0;
    white-space:pre;
}
img.centered, .aligncenter, div.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
img.alignright {
    display: inline;
}
img.alignleft {
    display: inline;
}
.alignright {
    float: right;
    margin-left: 10px;
}
.alignleft {
    float: left;
    margin-right: 10px;
}
img {
    max-width: 100%;
}
* html .clearfix {
    height: 1%;
}
* + html .clearfix {
    display: inline-block;
}
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
* html .group {
    height: 1%;
}
* + html .group {
    display: inline-block;
}
.group:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
/**
* End Vanilla CSS
*/

好消息是，您可以使用任何需要和不需要的东西。