search

博客列表 >css自定义样式来源选择器与选择器的权重分析

css自定义样式来源选择器与选择器的权重分析

搬砖来学php
搬砖来学php原创
2022年07月07日 17:36:25318浏览

1.自定义样式

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>
  10.     <!-- 自定义样式是程序员自己编写用来覆盖浏览器的默认样式 ,自定义样式是可以继承仅限于背景和颜色字体-->
  11.     <div>
  12.       <h1 style="color: red; color: brown">php中文网</h1>
  13.       <!-- 自定义样式和页面解析从上到下解析和书写的顺序有关 /此处是先解析了red红色到后面的brown橘色  所以后面的元素会覆盖前面的 -->
  14.     </div>
  15.   </body>
  16. </html>

2.内部样式

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>Document</title>
  8. </head>
  9. <body>
  10.     <style>
  11.         h1{
  12.             color: blue;
  13.         }
  14.     </style>
  15.     <!-- 内部样式把h1标签写到style属性中 内部样式仅限于使用当前html页面使用-->
  16.         <h1 >php中文网</h1>
  17.         <h1 >php培训</h1>
  18.         <h1 >php博客</h1>
  19. </body>
  20. </html>

3.外部引入样式

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>Document</title>
  8.     <link rel="stylesheet" href="/0705/dem6.css">
  9. </head>
  10. <body>
  12.         <h1 >php中文网</h1>
  13.         <h1 >php培训</h1>
  14.         <h1 >php博客</h1>
  15. </body>
  16. </html>

4. 选择器分类和使用方式

1.选择器分为标签选择器，属性选择器，群组选择器，通配选择器 代码如下，

  1. <!DOCTYPE html>
  2. <html lang="en">
  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.     <link rel="stylesheet" href="/0705/dem6.css">
  8.     <title>选择器的权重和分析</title>
  9. </head>
  10. <body>
  11.     <!-- 1.标签选择器是选用标签中的h1进行描述 代码如下 -->
  12.     <style>
  13.    /*标签选择器*/     h1{
  14.             color: aquamarine;
  15.         }
  16.     </style>
  18.         <h1>php中文网</h1>
  19.         <h2 id="hello">php中文网</h2>
  20.         <h3 class="em">php中文网</h3>
  21.         <h4 class="am">php中文网</h4>
  22.         <h5>php中文网</h5>
  23.         <h6>php中文网</h6>
  27.     <!-- 2.属性选择器
  28.     属性选择器的使用在当前标签里面需增加单独的一个属性、h2标签中使用了id="hello" -->
  29.     <style>
  30.         h2[id="hello"]{
  31.             color: blueviolet;
  32.         }
  33.     </style>
  36.         <!-- 3.群组选择器使用的是, 下面我们需要把h3标签和h4标签一起选择添加背景颜色需要使用, -->
  37.         <style>
  38.             h3.em,
  39.             h4.am{
  40.                 background-color: aqua;
  41.             }
  43.         </style>
  45.         <!-- 4.通配选择器使用的是*  !important是可以 把权重调到最高级别 多个不同的标签需要在选中父级 （body)+* -->
  46.         <style>
  47.             body *{
  48.                 background-color: blue !important;
  49.             }
  50.         </style>
  53. </body>
  54. </html>

5.上下文选择器

  1. <!DOCTYPE html>
  2. <html lang="en">
  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.     <link rel="stylesheet" href="/0705/dem6.css" />
  8.     <title>上下文选择器</title>
  9.   </head>
  11.   <!-- 1.子元素使用的> -->
  12.   <style>
  13.     .list > .item {
  14.       border: 2px solid;
  15.     }
  16.   </style>
  18.   <body>
  19.     <ul class="list">
  20.       <li class="item">item1</li>
  21.       <li class="item">item2</li>
  22.       <li class="item">
  23.         item3 
  26.         <!-- 2.后代元素使用的是 空格 -->
  27.         <style>
  28.           .list .item {
  29.             border: 2px solid;
  30.           }
  31.         </style>
  32.         <ul>
  33.           <li class="item">item3-1</li>
  34.           <li class="item">item3-2</li>
  35.           <li class="item">item3-3</li>
  36.         </ul>
  37.       </li>
  39.       <li class="item">item4</li>
  43.       <!-- 3.相邻兄弟使用的是+ 需要在标签里面添加一个属性  下面添加的是five 
  44.       使用方法 -->
  45.       <style>
  46.         .list > .item.five{
  47.             background-color: blue;
  48.           }
  50.            .list > .item.five + li{     /* 相邻兄弟使用的是  +  */
  51.         background-color: blue;
  52.       }
  54.       .list > .item.five ~ *{     /* 所有兄弟使用的是 ~ *  */
  55.         background-color: blue;
  56.       }
  57.   </style>
  58.       <li class="item five">item5</li>
  59.       <li class="item">item6</li>
  60.       <li class="item">item7</li>
  61.       <li class="item">item8</li>
  62.     </ul>
  63.   </body>
  64. </html>

6.选择器权重

  1. 选择器权重分为个十百  三位数 分别对应的是 标签代表个位数  class代表十位数 id代表百位数
  2. 举例：h1{
  3.     color: blue;
  4. }  
  5. 这里的h1就是一个标签属个位数 所以他的权重应该是001
  6. 举例2
  7. h1.title{
  8.     color: blueviolet;
  9. }
  10. 这里有一个h1个位数和一个class一个十位数 权重应是011
  12. 举例3.
  13. h1.title#acitve{
  14.     color: red;
  15. }
  17. 这里有一个h1标签 和一个class 和一个id 代表的权重是1 1 1  
  18. 页面解析首选权重是最高的所以这里解析的是红色颜色 因为111的权重比 0 0 1  和 0 1 1 都要高

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

相关文章

查看更多