search

博客列表 >样式优先级

样式优先级

P粉314265155
P粉314265155原创
2022年07月07日 12:58:32371浏览

我是内联样式

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>我是内联样式</title>
  8. </head>
  9. <body>
  12.     <h1 style="color: red;">我是内联样式</h1>
  13. </body>
  14. </html>

我是文档样式

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>我是文档样式</title>
  8. <style>
  11.    h1{
  12.     color: brown;
  13.    }
  14. </style>
  16. </head>
  17. <body>
  21.     <h1 style="color: red;">我是内联样式红色
  22.     </h1>
  24.     <h1 style="color:blue ;">我是内联样式蓝色</h1>
  25.     <h1>我是文档样式</h1>
  26.     <!-- 以上判断内联样式优先级高于 文档样式 高于默认样式 -->
  27. </body>
  28. </html>

我是外联样式

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>我是外联样式</title>
  9.     <link rel="stylesheet" href="../0706/css/zuoye3.css">
  11.     <style>
  14.         h1{
  15.          color: brown;
  16.         }
  17.      </style>
  19.      </head>
  20.      <body>
  24.          <h1 style="color: red;">我是内联样式红色
  25.          </h1>
  27.          <h1 style="color:blue ;">我是内联样式蓝色</h1>
  28.          <h1>我是文档样式</h1>
  29.          <!-- 以上判断内联样式优先级高于 文档样式 高于默认样式 -->
  31.          <h2>我是外部样式</h2>
  32.      </body>
  33.      </html>
  1. /* 我是外联样式 */
  2. h1{
  3.     color: blueviolet;
  4. }
  5. h2{
  7.     color: aquamarine;
  8. }

我是基本选择器

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>基本选择器</title>
  8. <link rel="stylesheet" href="../0706/css/zuoye4.css">
  9. </head>
  10. <body>
  12. <h1>我是标签选择器</h1>
  13. <h2 title="shuxing">我是属性选择器</h2>
  14. <h3 id="di">我是id属性选择器</h3>
  15. <h4  class="cl">我是class属性选择器</h4>
  16. <h5  id="qun" >我是群组选择器 1</h5>
  17. <h5   class="zu">我是群组选择器2</h5>
  19. </body>
  20. </html>
  1. /* 基本选择器 */
  3. /* 1、标签选择器 */
  4. h1{
  5.     color: blue;
  6. }
  8. /* 2、属性选择器 */
  9. h2[title='shuxing']{
  11.     color: green;
  12. }
  13. /* 2.1  id  属性选择器 */
  15. h3#di {
  16. color: brown;
  17. }
  18. /* 2.2 class  属性选择器 */
  19. h4.cl{
  21.     color: blue;
  22. }
  24. /* 3、群组选择器 */
  25. h5.qun,
  26. h5#zu,
  27. h5#qun,
  28. h5.zu
  29. {
  30. color: gold;
  31. }
  32. /* 4、通配属性选择器 */
  33. /* * : 包括了h2,h3 ...  */
  34. /*        body * {                */
  35.     /* !important: 临时提权到最高权重，用于调试 */
  36.     /*         background-color: gray !important;             */
  37.   /*           }                          */
  39.   body *  {
  40.     background-color: aqua  !important;
  41.   }

我是上下文选择器

  1. /* 我是上下文选择器 */
  2. /* 1、子元素选择器    用 >  连接*/
  4. .ul>.li{
  5.     color: aqua;
  6. }
  8. /* 2、我是后代选择器  用  空格     连接 */
  10. .ul .li{
  11.     color: blue;
  12. }
  13. /* 3、我是兄弟选择器  用  +  连接 */
  15. .ul .li+li.five{
  16.     color: red;
  17. }
  18. /* 我是兄弟选择器 用  星号连接 */
  19. .ul .li+li.five+*{
  20.     color: blueviolet;
  21. }
  22. /* 4、我是所有兄弟选择器  用  ~  连接 */
  24. .ul .li+li.five~*{
  26. color: green;
  29. }
  2. <!DOCTYPE html>
  3. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>上下文选择器</title>
  9.     <link rel="stylesheet" href="../0706/css/zuoye5.css">
  10. </head>
  11. <body>
  13.     <ul class="ul">
  14.         <li class="li">我是子元素选择器1</li>
  15.         <li class="li">我是子元素选择器2</li>  
  16.           <li class="li">我是子元素选择器3</li>
  17.           <li class="li">我是后代选择器4</li>
  18.           <li class="li five">我是兄弟选择器5</li>
  19.           <li class="li five six">我是兄弟选择器6</li>
  21.           <li class="li five six sev">我是所有兄弟选择器7</li>
  22.           <li class="li five six sev  ei">我是所有兄弟选择器7</li>
  23.         </ul>
  28. </body>
  29. </html>

我是优先级权重分析

  1. /* 我是优先级权重选择器 */
  3. /* 选择器种类    权值基数    权级 */
  4. /* !important    10000    5级 */
  5. /* 内联样式    1000    4级 */
  6. /* id选择器    100         3级 */
  7. /* class选择器    10    2级 */
  8. /* 元素选择器    1    1级 */
  9. /* 通配符选择器    0    0级  */

上一条：CSS样式优先级、权重和常用选择器解析下一条：自定义样式的来源与优先级\常用选择器与权重分析方法
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多