div#header{样式a} div#header{样式b} header显示哪一个样式
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>HTML4</title>
<!--在W3Cschool上看的一个例子不懂为什么多次给header加样式,显示哪一种样式是以什么为基准?附效果图-->
<style>
body {
    font-family:Verdana,sans-serif;font-size:0.8em;
}
div#header,div#footer,div#content,div#post {<!--这里给header,footer添加样式-->
    border:1px solid grey;
    margin:5px;margin-bottom:15px;padding:8px;
    background-color:white;
}
div#header,div#footer {<!--这里又添加样式,不懂!-->
    color:white;background-color:#444;margin-bottom:5px;
}
div#content {
    background-color:#ddd;
}
div#menu ul  {
    margin:0;padding:0;
}
div#menu ul li {
    display:inline; margin:5px;
}
</style>
</head>
<body>

<div id="header">
<h1>Monday Times</h1>
</div>

<div id="menu">
<ul>
  <li>News</li>
  <li>Sports</li>
  <li>Weather</li>
</ul>
</div>

<div id="content">
<h2>News Section</h2>

<div id="post">
<h2>News Article</h2>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
lurum hurum turum.</p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
lurum hurum turum.</p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
lurum hurum turum.</p>
</div>

<div id="post">
<h2>News Article</h2>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
lurum hurum turum.</p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
lurum hurum turum.</p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
lurum hurum turum.</p>
</div>

</div>

<div id="footer">
<p>© 2014 Monday Times. All rights reserved.</p>
</div>

</body>
</html>

图片说明
图片说明

css

1个回答

后一种,比较它们优先级

liaoxuewu
前端小木 回复早稻城: 不谢,学技术慢慢来,慢慢体会
接近 3 年之前 回复
u011233710
早稻城 原来如此,非常感谢,我体会还不够深,会继续学习理解的
接近 3 年之前 回复
liaoxuewu
前端小木 回复早稻城: 内联样式有很多弊端,真正开发需要做到结构、样式、行为三者分离,后期好维护
接近 3 年之前 回复
u011233710
早稻城 非常感谢,不过像贴的代码那样使用有什么好处呢,我是说为什么不直接用内联样式的方式规定自己想要的样式,这样我看着好乱(也可能我太菜了?)
接近 3 年之前 回复
liaoxuewu
前端小木 回复早稻城: 优先级的规则: 内联样式,优先级1000 id选择器,优先级100 类和伪类,优先级10 元素选择器,优先级1 通配选择器,优先级0 继承的样式没有优先级 当选择器包含多种选择器时,需要将多种选择器的优先级相加然后进行比较。但是注意,选择器的优先级计算不会超过他的最大数量级,如果选择器的优先级一样,则使用靠后的样式。 并集选择器的优先级时单独计算。
接近 3 年之前 回复
u011233710
早稻城 优先级是怎么看的呢?
接近 3 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问