CSS样式覆盖规则心得
2017-10-27 19:35
351 查看
在练习一个网页实战的时候，遇到个很奇怪的问题，经过网上查阅资料才知道 原来是不了解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>
[b]style.css:[/b]
body{
background:url(../images/bg.gif) repeat-y center;
color:#8f8f8f;
}
[b][b]reset.css:[/b][/b]
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;
}
[b]错误文件如下图所示：indextest.html[/b]
[b]
[/b]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>blog homepage</title>
[b][b]<link href="css/style.css" rel="stylesheet" media="screen">[/b][/b]
[b][b]<link
href="css/reset.css" rel="stylesheet" media="screen">
[/b][/b]
</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文件中的相同元素的相同属性覆盖 所以浏览器才判定被覆盖的无效 样式就不能正确显示了 。。
以上为本人学习过程中的一点小小积累 各位看官大神如有高见 欢迎指点
一下是解决过程简介：
有两个文件 ①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>
[b]style.css:[/b]
body{
background:url(../images/bg.gif) repeat-y center;
color:#8f8f8f;
}
[b][b]reset.css:[/b][/b]
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;
}
[b]错误文件如下图所示：indextest.html[/b]
[b]
[/b]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>blog homepage</title>
[b][b]<link href="css/style.css" rel="stylesheet" media="screen">[/b][/b]
[b][b]<link
href="css/reset.css" rel="stylesheet" media="screen">
[/b][/b]
</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文件中的相同元素的相同属性覆盖 所以浏览器才判定被覆盖的无效 样式就不能正确显示了 。。
以上为本人学习过程中的一点小小积累 各位看官大神如有高见 欢迎指点
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 