CSS样式覆盖规则心得

最新推荐文章于 2024-04-30 14:21:35 发布

ToBeYourHands

最新推荐文章于 2024-04-30 14:21:35 发布

阅读量4.8k

点赞数 1

分类专栏：前端文章标签： css html

本文链接：https://blog.csdn.net/qq_27600911/article/details/78368365

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在练习一个网页实战的时候，遇到个很奇怪的问题，经过网上查阅资料才知道原来是不了解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文件中的相同元素的相同属性覆盖所以浏览器才判定被覆盖的无效样式就不能正确显示了。。

以上为本人学习过程中的一点小小积累各位看官大神如有高见欢迎指点

ToBeYourHands

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS样式覆盖规则心得

在练习一个网页实战的时候，遇到个很奇怪的问题，经过网上查阅资料才知道原来是不了解css样式覆盖规则导致犯了一个低级又不容易发现的错误一下是解决过程简介：有两个文件 ①index.html（正确模板） ②indextest.html（自己练习）首先正确模板如下图所示：源码：index.html blog homep
复制链接

扫一扫