CSS学习笔记(十) 样式覆盖规则
<p>有的时候 CSS 真的十分调皮，明明我们给一个元素指定了样式，但是在页面上却没有一点改变</p><p>这时我们就要考虑是不是别处指定的样式覆盖了当前指定的样式呢？</p>
<p>所以了解一下样式覆盖规则还是十分有必要的，对于一个元素的某个属性而言，表现出来的样式会遵循以下的规则</p>
<p>（1）内联样式 > 内部样式表 / 外部样式表</p>
<pre><code class="language-html"><!DOCTYPE HTML>
<html>
<head>
<style>
#title { color: red; } /* 内部样式表 */
</style>
</head>
<body>
<div style="color: green;" id="title"> <!-- 内联样式 -->
Hello World
</div>
</body>
</html>
</code></pre>
<p>【最终效果（内联样式 优先）】<font color="green">Hello World</font></p>
<p>（2）在内部样式表 / 外部样式表中，直接指定的样式 > 继承祖先的样式</p>
<pre><code class="language-html"><!DOCTYPE HTML>
<html>
<head>
<style>
#title { color: red; }
span { color: green; } /* 直接指定 span 标签样式 */
</style>
</head>
<body>
<div id="title">
<span>Hello World</span> <!-- span 标签也会继承 div 标签的样式 -->
</div>
</body>
</html>
</code></pre>
<p>【最终效果（直接指定的样式 优先）】<font color="green">Hello World</font></p>
<p>（3）对于直接指定的样式，权值大的优先；如果权值相同，后定义的优先【重要】</p>
<blockquote>
<p>当直接指定的样式发生冲突时，根据定义该样式的选择器的权值大小进行比较，权值大的优先</p>
<p>选择器的权值计算定义如下：</p>
<ul>
<li>id 选择器 >> class 选择器 >> 标签选择器，其中同一类型的选择器权值相同</li>
<li>后代选择器的权值等于其包含的各级选择器的权值之和</li>
</ul>
</blockquote>
<pre><code class="language-html"><!DOCTYPE HTML>
<html>
<head>
<style>
#title span { color: red; } /* 后代选择器 = id 选择器（#title） + 标签选择器（span） */
#intro { color: green; } /* id 选择器（#intro） */
</style>
</head>
<body>
<div id="title">
<span id="intro">Hello World</span> <!-- id 选择器 + 标签选择器 > id 选择器 -->
</div>
</body>
</html>
</code></pre>
<p>【最终效果（权值大的优先）】<font color="red">Hello World</font></p>
<p>（4）对于继承祖先的样式，最近祖先优先</p>
<blockquote>
<p>当继承祖先的样式发生冲突时，根据继承的关系进行比较，最近祖先优先</p>
</blockquote>
<pre><code class="language-html"><!DOCTYPE HTML>
<html>
<head>
<style>
#title { color: red; }
#intro { color: green; }
</style>
</head>
<body>
<div id="title"> <!-- 对于下面的 span 标签来说，在继承树上距离较远 -->
<div id="intro"> <!-- 对于下面的 span 标签来说，在继承树上距离较近 -->
<span>Hello World</span>
</div>
</div>
</body>
</html>
</code></pre>
<p>【最终效果（最近祖先优先）】<font color="green">Hello World</font></p>
<p>（5）!important 声明无视上面的规则，其指定的样式永远不被覆盖【重要】</p>
<blockquote>
<p>其实这样的说法或许还有些许不准确，因为（有且仅有） !important 声明可以覆盖 !important 声明</p>
</blockquote>
<pre><code class="language-html"><!DOCTYPE HTML>
<html>
<head>
<style>
#title { color: red!important; } /* 加上 !important 声明的内部样式表 */
</style>
</head>
<body>
<div style="color: green;" id="title"> <!-- 内联样式 -->
Hello World
</div>
</body>
</html>
</code></pre>
<p>【最终效果（!important 声明优先）】<font color="red">Hello World</font></p>
<hr>
<p>【 阅读更多 CSS 系列文章，请看 CSS学习笔记 】</p>
</div>
<div id="MySignature" role="contentinfo">
版权声明：本博客属于个人维护博客，未经博主允许不得转载其中文章。<br><br>
来源：https://www.cnblogs.com/wsmrzx/p/11617737.html
頁:
[1]