微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > css样式来源和CSS优先级冲突解决方案

博主信息

博文 5

粉丝 0

访问量 5646

专题推荐

更多>

1009作业:

必做: css元素样式来源有哪些,实例演示
选做: css优先级冲突的解决方案

作业：

1.css元素样式来源有哪些?

1.当前文档，行内样式表<style>
2.当前元素的属性，style="..."
3.外部公共属性：common.css,jQuery.css,layui.css 通过link标签引入
2.实例演示

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>css元素样式来源有哪些</title>
    <link rel="stylesheet" href="static/css/common.css" />
    <style>
      h1 {
        color: red;
        font-size: 1rem;
      }
    </style>
  </head>
  <body>
    <h1>一、当前文档，行内样式表style</h1>
    <h2 style="color: rgb(38, 41, 207); font-size: 2rem">
      二、当前元素的属性，style="..."
    </h2>
    <h3>三、外部公共属性：common.css</h3>
  </body>
</html>
common.css
body {
  color: green;
  font-size: 3rem;
  border: 1px solid;
}

效果图如下：

3.css优先级冲突的解决方案?

案例	id	class	tag	标识
`html body header h1`	0	0	4	`0,0,4`
`body header.page-header h1`	0	1	3	`0,1,3`
`.page-header .title`	0	2	0	`0,2,0`
`#page-title`	1	0	0	`1,0,0`

注意事项

尽可能不要用！important
尽可能不要用id
为什么要少用或者不用 ID ?
- 原因是级别太高，丧失了灵活性
为什么尽可能不用 TAG ?
- 因为 CSS 的本质是为了“样式复用”
尽可能在可用的情况下，使用 class 来完成

以下视频学习笔记

CSS 第一课

1.CSS 是什么

CSS : cascade style sheet (层叠样式表)
CSS 是编程语言吗？不是
CSS 难吗？因人而异
核心：层叠，盒模型，单位(px/em/rem/vh/vw/fr)，定位，浮动

2.层叠

当一个元素可以被多种选择器匹配时，层叠可以解决样式设置上的冲突

3.层叠解决样式冲突的三种方案

1.样式表的来源
2.选择器的优先级
3.源码的顺序

4. 样式表的来源（自定义样式）

1.当前文档 <style>
2.当前元素的属性：style="..."
3.外部公共样式：common.css,jQuery.css,layui.css通过<link>标签引入

5.选择器的优先级

tag < class < id

6. 源码的顺序的影响

7. 用户代理样式

用户代理：就是浏览器，代理的是用户的 HTTP 请求，请求一个网络资源 URL
浏览器默认样式

8.选择器的优先级方案

案例	id	class	tag	标识
`html body header h1`	0	0	4	`0,0,4`
`body header.page-header h1`	0	1	3	`0,1,3`
`.page-header .title`	0	2	0	`0,2,0`
`#page-title`	1	0	0	`1,0,0`

9.注意

尽可能不要用！important
尽可能不要用id
为什么要少用或者不用 ID ?
- 原因是级别太高，丧失了灵活性
为什么尽可能不用 TAG ?
- 因为 CSS 的本质是为了“样式复用”
尽可能在可用的情况下，使用 class 来完成

10. 继承

有的属性可以被继承，如颜色，字体等文本，有的则不能，如盒模型
二个关键字
- inherit : 继承
- initail : 初值

代码示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>层叠的意义</title>
    <!-- 内部样式表，仅适合当前的文档 -->
    <style>
      /* 标签：选择器selector */
      /* 选择器 规则集 rule  */
      h1 {
        /* 声明 ： 属性color ：值green */
        /* 声明块 ： 使用大括号 将多个声明包裹起来 */
        color: green;
        font-weight: normal;
      }
      /* 
      1.声明：由属性和属性值二部分组成
      2.声明块：由一个或多个声明，包裹在一对大括号中
      3.选择器：写在声明块签名的一个标识符，用来选择页面中一个或多个元素
      4.规则集：选择器和声明块组成 */
      /* #ID选择器 */
      #page-title {
        color: chartreuse;
      }
      /* class 类选择器 */
      .title {
        color: crimson;
      }
    </style>
  </head>
  <body>
    <h1 id="page-title" class="title">我在PHP中文网学习PHP</h1>
    <h1>php中文网：php.cn</h1>
    <!-- 三个选择器，选中了同一个元素，但是呈现的效果却不一致，原因是这些选择器具有优先级 -->
    <script>
      console.log(document.querySelector(".title"));
      console.log(document.querySelector("#pgge-title"));
      console.log()document.querySelector("h1");
    </script>
  </body>
</html>

代码实例：选择器的优先级

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>选择器的优先级</title>
    <style>
      h1 {
        color: red;
      }
      .title {
        color: green;
      }
      #page-title {
        color: blue;
      }
    </style>
  </head>
  <body>
    <h1 class="title" id="page-title" style="color: yellow">
      我喜欢PHP中文网：php.cn
    </h1>
  </body>
</html>

代码示例：继承

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="static/css/style1.css" />
    <title>继承</title>
  </head>
  <body>
    <header>
      <h1>我现在学习PHP编程</h1>
      <h2>我现在学习CSS样式层叠</h2>
      <p>来自中文PHP中文网学习</p>
      <h3 class="red">老师晚上好</h3>
    </header>
    <footer>&copy;php.cn版权所有</footer>
  </body>
</html>
css
/* 0,0,4 */
html body header h1 {
  color: red;
}
/* 0,1,3 */
body header.page-header h1 {
  color: green;
}
/* 0,2,2 */
/* header.page-header h1.title  */
/* 0,2,0 */
.page-header .title {
  color: greenyellow;
}
/* 1,0,0 */
#page-title {
  color: red;
}
.red {
  color: brown;
}
body {
  color: initail;
  font-size: 2rem;
  /* 边框不可以继承 */
  border: 1px solid;
}