Question

我是CSS的新手，我刚刚阅读了有关应用样式的各种类型的层次结构的主题。更具体地说，我读到嵌入式方法总是覆盖外部，但是当我运行一些测试时，情况并非总是如此。

嵌入式样式和外部的声明是在网页的head元素中完成的，我发现嵌入式样式只有在外部写入后才会覆盖外部。

例如，假设我们有以下代码段

  <head>
<title>Testing CSS Hierarchy</title>

<style type="text/css">p {color:#fff;}</style>

<link rel="stylesheet" media="screen" type="text/css" href="css/screen/external.css"/>

</head>

在上面的示例中，外部规则会覆盖嵌入式!!!!

我是否理解错误或这是正常的？

提前告诉你。

Answer 1

在链接到外部文件后尝试使用嵌入式样式：

<head>
    <link rel="stylesheet" media="screen" type="text/css" href="css/screen/external.css"/>
    <style type="text/css">p {color:#fff;}</style>
</head>

之后的CSS会覆盖之前的CSS。

Answer 2

在这种情况下，规则很简单，最后一个是使用的规则。尝试反过来：

<head>
   <title>Testing CSS Hierarchy</title>
   <link rel="stylesheet" media="screen" type="text/css" href="css/screen/external.css"/>
   <style type="text/css">p {color:#fff;}</style>
</head>

CSS层次结构（嵌入式对外部）

2 个答案: