CSS样式覆盖规则心得
一下是解决过程简介：
有两个文件 ①index.html（正确模板） ②indextest.html（自己练习）
首先 正确模板如下图所示：
源码：index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>blog homepage</title>
<link href="css/reset.css" rel="stylesheet" media="screen">
<link href="css/style.css" rel="stylesheet" media="screen">
</head>
<body>
<div id="page">
<aside id="sidebar">
<nav><a class="logo" href="#top" id="nav-logo"><span>A portfolio of</span>Joefrey Mahusay</a>
<ul>
<li class="active" id="nav-1"><a href="#home">HOME</a></li>
<li id="nav-2"><a href="#work">WORK</a></li>
<li id="nav-3"><a href="#about">ABOUT</a></li>
<li id="nav-4"><a href="#contact">CONTACT</a></li>
</ul>
<div class="bg_bottom"></div>
</nav>
</aside>
style.css:
body{
background:url(../images/bg.gif) repeat-y center;
color:#8f8f8f;
}
reset.css:
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, footer, header, hgroup,
menu, nav, section, summary, time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
错误文件如下图所示：indextest.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>blog homepage</title>
<link href="css/style.css" rel="stylesheet" media="screen">
<link
href="css/reset.css" rel="stylesheet" media="screen">
</head>
<body>
<div id="page">
<aside id="sidebar">
<nav><a class="logo" href="#top" id="nav-logo"><span>A portfolio of</span>Joefrey Mahusay</a>
<ul>
<li class="active" id="nav-1"><a href="#home">HOME</a></li>
<li id="nav-2"><a href="#work">WORK</a></li>
<li id="nav-3"><a href="#about">ABOUT</a></li>
<li id="nav-4"><a href="#contact">CONTACT</a></li>
</ul>
<div class="bg_bottom"></div>
</nav>
</aside>
以上截图 相信懂的人一眼就看出来了吧 没错 就是因为css文件引入顺序颠倒了一下 所以导致body元素background属性被覆盖 所以indextest.html才会不现实背景图片
根本原因是 根据css样式覆盖原则 在样式权值相同的情况下 后导入的css文件会把先倒入的css文件中的相同元素的相同属性覆盖 所以浏览器才判定被覆盖的无效 样式就不能正确显示了 。。
以上为本人学习过程中的一点小小积累 各位看官大神如有高见 欢迎指点