1. 实例演示自定义样式的来源与优先级

1.1自定义样式的来源

<body>
    <div style="color: blue">  
      <h2 style="color: red">hello world</h2>
      <h2>大家好</h2>
      <!-- 
      1.默认样式：代理样式，是为每个元素预置的样式
      2.继承样式：某一些属性，如颜色，字体，它可以由它的父级进行设置，达到简化的效果。
      3.自动义样式：就是元素中的style中设置的样式 -->
      <!-- 由上至下解析，后面会覆盖前面的，元素的最终样式与书写顺序相关。 -->
     <!--  style为内部样式，文档样式，换个html文件就失效-->
    </div>
  </body>

1.样式的优先级

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>自定义样式的来源与优先级</title>
    <link rel="stylesheet" href="style.css" />
    <!--  link标签  此为外部样式 -->
    <style>
      h1 {
        color: black;
      }
    </style>
        <!--  <style>标签  此为文档样式 -->
  </head>
  <body>
    <h1 style="color: aliceblue">我是红色</h1>
    <!-- style属性 此为内联样式 -->
  </body>
</html>

内联样式:给元素添加“style”属性,仅适用于当前的特定的某个元素
文档样式：给当前html文档添加“style”标签，仅适用于当前的html文档，如demo.html
外部样式：将多个页面共用的样式，写到一个外部css文档中，再引入对应的页面进行复用。
总结：内联样式 > 文档样式 >外部样式 >浏览器默认样式
实战中首选外部样式。

2. 实例演示常用选择器与权重分析方法

/* 1.标签选择器 */
h2 {
  color: blue;
}
/* 2.属性选择器 */
h2[title="welcome"] {
  color: brown;
}
h2.h22 {
  color: #000;
}
h2#h33 {
  color: aqua;
}
/* 3.群组选择器 */
h2#h55,
h2.h66 {
  background: #000;
}
/* 4.通配选择器：* */
body * {
  background-color: rgb(0, 226, 45);
}
/* 上下文选择器 */
/* 1.子元素: > */
.list > .item {
  border: 2px solid;
}
/* 2. 后代元素: 空格 */
.list .item {
  border: 2px solid;
}
/* 3.相邻兄弟: + =隔壁，多个+号就是隔壁的隔壁*/
.list > .item.five {
  background: blue;
}
.list > .item.five + * + * + * {
  background-color: gray;
}
/* 4.所有兄弟: ~  ~号选中往下有所元素*/
.list > .item.five ~ * {
  background-color: blanchedalmond;
}

使用三位整数，表示选择器的因子权重
（百，十，个）
（id,class,tag)
他们的值表示因子的数量

0.0.1:表示只有一个tag，没有class和id
0,0,2:表示有两个tag，没有class和id
0,1,1：表示有一个tag，有一个class，，没有id。
1.1.1：表示有一个tag，一个class，一个id。

002 > 001 以此类推

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

markdown语法使用介绍

2022-07-11 10:50:34