欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

实战演示元素的样式来源以及基本选择器,和上下文选择器 并对比选择器的权重,并分析了为什么常用class属性少用id和标签属性

程序员文章站 2022-03-27 08:28:08
...

课后作业

实战演示元素的样式来源以及基本选择器,和上下文选择器 并对比选择器的权重,并分析了为什么常用class属性少用id和标签属性

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    3. 

  3.   <head>
    4. 

  4.     <meta charset="UTF-8" />
    5. 

  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6. 

  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7. 

  7.     <title>Document</title>
    8. 

  8.   </head>
    9. 

  9.   <body>
    10. 

  10.     <div>
    11. 

  11.       <h1>作业内容：</h1>
    12. 

  12.       <h5>示例演示元素的样式来源</h5>
    13. 

  13.       <!-- 上面使用的h1和h5是浏览器自带的样式来源,并非用户自定义的样式来源 -->
    14. 

  14.       <!-- 下面为用户自定义来源,来源的方式有三种 -->
    15. 

  15.       <h1 style="color: blue">用户自定义样式来源</h1>
    16. 

  16.       <!-- 理解为行内 -->
    17. 

  17.       <h1 class="h1">内部样式</h1>
    18. 

  18.       <style>
    19. 

  19.         .h1 {
    20. 

  20.           color: brown;
    21. 

  21.         }
    22. 

  22.       </style>
    23. 

  23.     </div>
    24. 

  24.     <!-- 上面理解为内部 -->
    25. 

  25.     <h2 class="h2">引用外部样式</h2>
    26. 

  26.     <link rel="stylesheet" href="demo.css" />
    27. 

  27.     <!-- 引用外部的css -->
    28. 

  28.     <!-- 1. 实例演示: 元素的样式来源结束 -->
    29. 

  29.     <!-- 示例演练以下几种常用的选择器 -->
    30. 

  30.     <h2>基本选择器常用的几种</h2>
    31. 

  31.     <h4>标签选择器</h4>
    32. 

  32.     <p>像常用的标签选择器有div/h1/h2/h3以标签命名</p>
    33. 

  33.     <p>标签选择器实现当前的效果</p>
    34. 

  34.     <style>
    35. 

  35.       h2 {
    36. 

  36.         background-color: brown;
    37. 

  37.       }
    38. 

  38.       p {
    39. 

  39.         color: blue;
    40. 

  40.       }
    41. 

  41.       h4 {
    42. 

  42.         background-color: blueviolet;
    43. 

  43.       }
    44. 

  44.     </style>
    45. 

  45.     <!-- 标签选择器演练结束下面将使用class选择器 -->
    46. 

  46.     <div class="tags">
    47. 

  47.       <p>当前使用了class选择器,当前页面前面已经使用了p标签选择器,</p>
    48. 

  48.       <p>但是我现在又用了class选择器,class选择器的权重比标签选择器高,</p>
    49. 

  49.       <p>来查看下效果吧</p>
    50. 

  50.     </div>
    51. 

  51.     <style>
    52. 

  52.       div.tags p {
    53. 

  53.         color: red;
    54. 

  54.       }
    55. 

  55.     </style>
    56. 

  56.     <!-- 下面将使用id选择器,按照权重的分配,标签选择器的权重比id选择器更低,这里将使用到id选择器 -->
    57. 

  57.     <div id="tags" class="tags">
    58. 

  58.       <p>id选择器具有较高的权限,比默认的浏览器自带的,和class选择器的级别更改,</p>
    59. 

  59.       <p>当前使用了id选择器,在之前的代码中,已经写到了class选择器p标签的颜色,</p>
    60. 

  60.       <p>红色,但是我用id选择器又更改为了另外的颜色</p>
    61. 

  61.     </div>
    62. 

  62.     <style>
    63. 

  63.       #tags p {
    64. 

  64.         color: chocolate;
    65. 

  65.       }
    66. 

  66.     </style>
    67. 

  67.     <!-- 下面为群组选择器的实战演练 -->
    68. 

  68.     <div>
    69. 

  69.       <div>
    70. 

  70.         <a href="">群组选择器1</a>
    71. 

  71.         <a href="">群组选择器2</a>
    72. 

  72.         <a href="">群组选择器3</a>
    73. 

  73.         <a href="">群组选择器4</a>
    74. 

  74.         <a href="">群组选择器5</a>
    75. 

  75.       </div>
    76. 

  76.     </div>
    77. 

  77.     <div>
    78. 

  78.       <li>
    79. 

  79.         <a href="">第二组1</a><a href="">第二组2</a><a href="">第二组3</a><a href="">第二组4</a><a href="">第二组5</a>
    80. 

  80.       </li>
    81. 

  81.     </div>
    82. 

  82.     <style>
    83. 

  83.       div a,
    84. 

  84.       li a {
    85. 

  85.         color: crimson;
    86. 

  86.       }
    87. 

  87.     </style>
    88. 

  88.     <!-- 上面为群组选择器的实战演练 -->
    89. 

  89.     <!-- 下面为通配符选择器演练部分 -->
    90. 

  90.     <style>
    91. 

  91.       html body ul li * {
    92. 

  92.         color: darkgreen;
    93. 

  93.       }
    94. 

  94.     </style>
    95. 

  95.     <ul>
    96. 

  96.       <li>
    97. 

  97.         <a href="baidu.com">百度一下1</a><a href="baidu.com">百度一下2</a><a href="baidu.com">百度一下3</a
    98. 

  98.         ><a href="baidu.com">百度一下4</a><a href="baidu.com">百度一下5</a>
    99. 

  99.       </li>
    100. 

  100.     </ul>
    101. 

  101.     <!-- 上方为通配选择器演练部分 -->
    102. 

  102.     <!-- 下面为上下文选择器实战部分 -->
    103. 

  103.     <!-- 常规的子元素选择器 -->
    104. 

  104.     <ul class="php">
    105. 

  105.       <li>
    106. 

  106.         <a href="php.cn">上级</a>
    107. 

  107.       <li>
    108. 

  108.         <a href="php.cn">1</a><a href="php.cn">2</a><a href="php.cn">3</a
    109. 

  109.         ><a href="php.cn">4</a><a href="php.cn">5</a>
    110. 

  110.       </li>
    111. 

  111.       </li>
    112. 

  112.     </ul>
    113. 

  113.     <style>
    114. 

  114.     ul.php > li > a{color: darkmagenta;}
    115. 

  115.     </style>
    116. 

  116.     <!-- 兄弟元素和和后代元素同时使用,词快穷了 -->
    117. 

  117.     <ul>
    118. 

  118.         <li>后代元素15</li>
    119. 

  119.         <li class="h">后代元素25</li>
    120. 

  120.         <li>后代元素35</li>
    121. 

  121.         <li>后代元素45</li>
    122. 

  122.         <li>后代元素55</li>
    123. 

  123.     </ul>
    124. 

  124.     <style>ul li.h + *{color: darkmagenta;}</style>
    125. 

  125.     <!-- 兄弟后代元素完毕 -->
    126. 

  126.     <div>
    127. 

  127.       <div>
    128. 

  128.         <li>
    129. 

  129.           <a href="" class="a1">证明一下后面的所有元素</a>
    130. 

  130.           <a href="" class="a2">证明一下后面的所有元素</a>
    131. 

  131.           <a href="" class="a3">证明一下后面的所有元素</a>
    132. 

  132.           <a href="" class="a4">证明一下后面的所有元素</a>
    133. 

  133.           <a href="" class="a5">证明一下后面的所有元素</a>
    134. 

  134.         </li>
    135. 

  135.       </div>
    136. 

  136.     </div>
    137. 

  137.     <style>div div li a.a2 ~ *{color: darkturquoise;}</style>
    138. 

  138.     <!-- 后面所有的元素证明完毕 -->
    139. 

  139.     <!-- 最后面选择器的权重 -->
    140. 

  140.     选择器的权重id>class>标签,而同类相比,数量又居上,
    141. 

  141.     <div>
    142. 

  142.       <div><div><div><div><li>
    143. 

  143.         <a href="">标签权重测试</a>
    144. 

  144.       </li></div></div></div></div>
    145. 

  145.     </div>
    146. 

  146.     <style>
    147. 

  147.       /* 下面属性标签为4个div 一个a标签.标签的值为0 0 5 所以为紫色 */
    148. 

  148.     div div div li a{color: darkviolet;}
    149. 

  149.     /* 如果不注释上面的标签,使用下面的标签 标签的值为0 0 6 */
    150. 

  150.     div div div div li a{color: red;}
    151. 

  151.     </style>
    152. 

  152. <!-- 上面为标签属性权重对比 -->
    153. 

  153. <!-- 下面为class权重属性对比 -->
    154. 

  154.     <div>
    155. 

  155.       <div><div class="div"><div><div><li class="li">
    156. 

  156.         <a href="">class权重测试</a>
    157. 

  157.       </li></div></div></div></div>
    158. 

  158.     </div>
    159. 

  159.     <style>
    160. 

  160.       /* 下面属性标签+class为4个div 一个class 一个a标签.标签的值为0 1 5 所以为紫色 */
    161. 

  161.     div div div li.li a{color: darkviolet;}
    162. 

  162.     /* 如果不注释上面的标签,使用下面的标签 标签的值为0 2 6 */
    163. 

  163.     div div.div div div li.li a{color: red;}
    164. 

  164.     </style>
    165. 

  165.     <!-- id属性+class属性+标签属性权重测试 -->
    166. 

  166.     <div>
    167. 

  167.       <div id="nav"><div class="div nav"><div><div><li class="li">
    168. 

  168.         <a href="">综合属性权重测试</a>
    169. 

  169.       </li></div></div></div></div>
    170. 

  170.     </div>
    171. 

  171.     <style>
    172. 

  172.       /* 下面属性标签+class为4个div 一个class 一个a标签.标签的值为0 1 5 所以为紫色 */
    173. 

  173.     div div div li.li a{color: darkviolet;}
    174. 

  174.     /* 如果不注释上面的标签,使用下面的标签 标签的值为0 2 6 */
    175. 

  175.     div div.div div div li.li a{color: red;}
    176. 

  176.     /* 如果不注释上面的标签,使用下面的标签 标签的值为0 3 6 */
    177. 

  177.     div div.div.nav div div li.li a{color: rgb(60, 0, 255);}
    178. 

  178.     /* 如果不注释上面的标签,使用下面的标签 标签的值为1 3 6 */
    179. 

  179.     div#nav div.div.nav div div li.li a{color: orangered;}
    180. 

  180.     </style>
    181. 

  181.   </body>
    182. 

  182. </html>
    183.

以下部分为本人理解部分,老师可以略过.

元素来源:

元素的两大样式来源
  • 浏览器默认样式
  • 用户自定义样式
  1. 浏览器默认样式
    浏览器的默认样式常用的都存在于标签中,如h1/h2/h3/a标签,都是常见的浏览器自默认样式的标签,h1标签对文字增大,a标签对文字颜色加色
  2. 用户自定义样式
    用户自定义样式的格式如下面几篇代码均为用户自定义样式
    <h1 style="color: red">你好php</h1>
    <a href="#"style="color: red" >把a标签默认的颜色蓝色换成红色</a>
    用户定义了颜色为红色的文字,也叫设置样式
    /* h1 : 标签/也叫元素选择器 */
    有了标签需给标签添加样式,上面已经添加了样式,样式是包裹在标签里面,形式如下:
    style="老师叫形式声明"
    写法如下:
      

    1.    /* h1 { */
      2. 

    2.    /* 样式声明: 使用是"名值对" */
      3. 

    3.    /* color: red; */
      4. 

    4.    /* } */
      5.
而形式声明又分为三种
  • 行内形式
  • 内部形式
  • 外部形式
  1. 行内形式
    行内形式顾名思义,是写在标签行内的形式,如以下:
    <h1 style="color: red">你好php</h1>

  2. 内部形式
    内部形式是写在页面内部,如以下

      

    1. <h1 style="color: indigo">大家晚上好,吃了吗?</h1>
      2. 

      3. 

    3.  <style>
      4. 

    4.    h1 {
      5. 

    5.      color: blue;
      6. 

    6.    }
      7. 

    7.  </style>
      8.

  3. 外部形式
    外部形式是引用外部css到当前页面或多个页面调用使用,示例代码如下:

      

    1. <link rel="stylesheet" href="css/style1.css" />
      2. 

    2.  上面css里面已经写入了css
      3. 

    3. <h1 class="love">大家晚上好,吃了吗?</h1>
      4.

    其优先级关系调用,行内>内部>外部 当然还有个秒天秒地秒空气的..尽量调试用的
    这里直接贴入老师写注释代码,以防自己忘记.

      

    1. <!-- 当前是HTML, 结构化的文本文档,它内部的所有元素,必须使用"标签"进行描述 -->
      2. 

    2.  <!-- 只要放到了html中内容,并且要被浏览器进行解析或处理的,就必须要放到一个"标签"  -->
      3. 

    3.  <style>
      4. 

    4.    /* 1. 查询: 找到要被添加样式的元素 */
      5. 

    5.    /* selector : 选择器 */
      6. 

      7. 

    7.    /* h1 : 标签/元素选择器 */
      8. 

    8.    /* 2. 为匹配的元素,设置样式规则 */
      9. 

    9.    /* 样式规则: 放入一对大括号中 */
      10. 

    10.    /* h1 { */
      11. 

    11.    /* 样式声明: 使用是"名值对" */
      12. 

    12.    /* color: red; */
      13. 

    13.    /* } */
      14. 

      15. 

    15.    /* 选择器 {
      16. 

    16.        一个或多个样式声明
      17. 

    17.    } */
      18. 

      19. 

    19.    /* css工作流:  1. 找到元素;  2. 设置样式  */
      20. 

    20.  </style>
      21. 

      22. 

    22.  <!-- style属性的优先级要大于  style 标签  -->
      23. 

      24. 

    24.  <!-- style="..." : 行内样式/内联样式, 直接作用到"元素级" -->
      25. 

    25.  <!-- <style>: 内部样式/文档样式, 直接作用到"文档级" -->
      26.

再说下内页优先级,常用在页面内部和css内部,当一个css当中,例如颜色为多个颜色,优先使用最后一个,如以下:

    

  1.    <style>
    2. 

  2.       h1 {
    3. 

  3.         color: red;
    4. 

  4.         color: green;
    5. 

  5.         color: blue;
    6. 

    7. 

  7.         /* 样式来源, 除了与优先级相关, 还与书写顺序相关 */
    8. 

  8.         /* 写到后面,会覆盖前面的 */
    9. 

  9.       }
    10. 

  10.     </style>
    11.
标签属性的样式集成

先贴代码:

    

  1.     <div>
    2. 

  2.       <p>html是一个具有层级结构的文档,可以根据元素之间层级关注,实现样式复用</p>
    3. 

  3.       <a href="#">样式继承</a>
    4. 

  4.       <h3 style="color: turquoise">Hello</h3>
    5. 

  5.     </div>
    6. 

  6.     <style>
    7. 

  7.       div {
    8. 

  8.         /* div是P的父级 */
    9. 

  9.         border: 1px solid #000;
    10. 

  10.         color: violet;
    11. 

  11.       }
    12. 

    13. 

  13.       p {
    14. 

  14.         color: green;
    15. 

  15.         /* 颜色/前景色: 是可以继承的属性 */
    16. 

  16.         color: inherit;
    17. 

  17.       }
    18. 

    19. 

  19.       /* 默认样式/代理样式 > 继承样式  */
    20. 

    21. 

  21.       /* 1. style标签 
    22. 

  22.       2. 外部css文档
    23. 

  23.       3. 样式继承 */
    24. 

  24.     </style>
    25.

子级集成父级别的样式,例如代码中如果不存在p标签单独的属性,div中的颜色会继承为p标签,但如果p标签有了自己的颜色,将使用p标签单独的颜色,其中p标签color: inherit;意思是强制继承父级color颜色.就是无论p标签的color单独设置什么颜色,都将继承div里面的color的颜色,多用多数量

属性基本选择器

属性的基本选择器常用的分为以下几种:

    

  1.  <h2>item1</h2>
    2. 

  2.     <h2 title="hello">item2</h2>
    3. 

  3.     <!-- id的唯一性由开发者确保,浏览器不检查 -->
    4. 

  4.     <h2 id="a">item3</h2>
    5. 

  5.     <h2 id="a">item4</h2>
    6. 

  6.     <h2 class="b">item5</h2>
    7. 

  7.     <h2 class="b">item6</h2>
    8. 

    9. 

  9.     <style>
    10. 

  10.       /* 基本选择器: 根据元素自身特点来选择 */
    11. 

  11.       /* 1. 标签选择器 */
    12. 

  12.       h2 {
    13. 

  13.         color: red;
    14. 

  14.       }
    15. 

    16. 

  16.       /* 2. 属性选择器 */
    17. 

  17.       h2[title="hello"] {
    18. 

  18.         color: green;
    19. 

  19.       }
    20. 

  20.       /* id: 用于唯一元素 */
    21. 

  21.       h2[id="a"] {
    22. 

  22.         color: blue;
    23. 

  23.       }
    24. 

  24.       /* class: 用于多个元素 */
    25. 

  25.       h2[class="b"] {
    26. 

  26.         color: violet;
    27. 

  27.       }
    28. 

    29. 

  29.       /* id, class是 高频属性 */
    30. 

  30.       /* id => #  */
    31. 

  31.       h2#a {
    32. 

  32.         color: cyan;
    33. 

  33.       }
    34. 

  34.       /* class = "."  */
    35. 

  35.       h2.b {
    36. 

  36.         color: orange;
    37. 

  37.       }
    38. 

  38.       /* 推荐尽可能只用class  */
    39. 

    40. 

  40.       /* 3. 群组选择器 */
    41. 

  41.       h2#a,
    42. 

  42.       h2.b {
    43. 

  43.         background-color: yellow;
    44. 

  44.       }
    45. 

    46. 

  46.       /* 4. 通配选择器: *  */
    47. 

  47.       html body * {
    48. 

  48.         background-color: gray !important;
    49. 

  49.       }
    50. 

  50.       /* !important: 瞬间提权到100%*只建议在开发中使用  */
    51. 

  51.     </style>
    52.
上下文选择器/层级选择器

示例代码:

    

  1.     <ul class="list">
    2. 

  2.       <li class="item">item1</li>
    3. 

  3.       <li class="item second">item2</li>
    4. 

  4.       <li class="item">
    5. 

  5.         item3
    6. 

  6.         <!-- <ul class="inner">
    7. 

  7.           <li>item3-1</li>
    8. 

  8.           <li>item3-2</li>
    9. 

  9.           <li>item3-3</li>
    10. 

  10.         </ul> -->
    11. 

  11.       </li>
    12. 

  12.       <li class="item">item4</li>
    13. 

  13.       <li class="item">item5</li>
    14. 

  14.       <li class="item">item6</li>
    15. 

  15.       <li class="item">item7</li>
    16. 

  16.       <li class="item">item8</li>
    17. 

  17.     </ul>
    18. 

    19. 

  19.     <style>
    20. 

  20.       /* 1. 子元素(就是class属性+标签,是用符号>,具体的区分可以看下后代元素部分)  
    21. 

  21. 也就是说,这里生效的部分仅限于第四行以前,超出第四行部分css部分不会生效*/
    22. 

  22.       .list > li {
    23. 

  23.         border: 1px solid #000;
    24. 

  24.       }
    25. 

    26. 

  26.       /* 2. 后代元素: 空格 (后代元素是后面是后面所有的,意思就是,不止第四行的css会变,第10行以前的li都会改变css样式)*/
    27. 

  27.       .list li {
    28. 

  28.         border: 1px solid #000;
    29. 

  29.       }
    30. 

    31. 

  31.       /* 3. 相邻兄弟: +  */(比较好理解就是下一行代码执行的命令)
    32. 

  32.       .item.second + * {
    33. 

  33.         background-color: lightcyan;
    34. 

  34.       }
    35. 

    36. 

  36.       /* 4. 所有兄弟: ~  */ (定位的后面所有代码都将执行下面的css)
    37. 

  37.       .item.second ~ * {
    38. 

  38.         background-color: yellow;
    39. 

  39.       }
    40. 

  40.     </style>
    41.
选择器的继承
    

  1. <body>
    2. 

  2.     <h1 class="title" id="active">Hello</h1>
    3. 

    4. 

  4.     <style>
    5. 

  5.       /* 1 1 2 */
    6. 

  6.       /* 2: 表示2个标签, 
    7. 

  7.       1: 表示1个class
    8. 

  8.       1: 表示1个id  */
    9. 

  9.       body h1.title#active {
    10. 

  10.         color: red;
    11. 

  11.       }
    12. 

  12.       /* 0 1 2 */
    13. 

  13.       /* 2: 表示2个标签, 
    14. 

  14.       1: 表示1个class
    15. 

  15.       0: 表示没有id  */
    16. 

  16.       body h1.title {
    17. 

  17.         color: blue;
    18. 

  18.       }
    19. 

  19.       /* 就想放在第一行,又想让它生效,只有提权 */
    20. 

  20.       /* 0 0 2 */
    21. 

  21.       /* 2: 表示2个标签, 
    22. 

  22.       0: 表示没有class
    23. 

  23.       0: 表示没有id  */
    24. 

  24.       body h1 {
    25. 

  25.         color: green;
    26. 

  26.       }
    27. 

  27.       /* 相同的权重,由位置决定样式 */
    28. 

  28.       /* 0 0 1 */
    29. 

  29.       /* 1: 表示只有一个标签, 
    30. 

  30.       0: 表示没有class
    31. 

  31.       0: 表示没有id  */
    32. 

  32.       h1 {
    33. 

  33.         color: darkorange;
    34. 

  34.       }
    35. 

    36. 

  36.       /* 三个权重的位置, 从右到左
    37. 

  37.       第1位: 标签数量
    38. 

  38.       第2位: class数量
    39. 

  39.       第3位: id数量 */
    40. 

    41. 

  41.       /* css 将 id, class, tag 看成一个"三位整数", id -> 百位, class -> 十位, tag -> 个位 */
    42. 

    43. 

  43.       /* h1 {
    44. 

  44.         color: violet !important;
    45. 

  45.       } */
    46. 

    47. 

  47.       /* id : 为什么不推荐用? 因为权重太高, 为了让你的代码具有弹性,尽可能用class */
    48. 

  48.       /* 为什么不用权重最低的标签呢? 只是标签的数量太少了, 而class可以任何命名 */
    49. 

    50. 

  50.       /* bootstrap , element ui  */
    51. 

  51.     </style>
    52. 

    53. 

  53.     <div class="col-md-3 vip">Bootstrap</div>
    54. 

    55. 

  55.     <style>
    56. 

  56.       /* 0 2 1 */
    57. 

  57.       div.col-md-3.vip {
    58. 

  58.         border: 5px solid red;
    59. 

  59.       }
    60. 

  60.       /* 0 1 1  */
    61. 

  61.       div.col-md-3 {
    62. 

  62.         border: 1px solid #000;
    63. 

  63.       }
    64. 

  64.     </style>
    65. 

  65.   </body>
    66.

上一篇： php数组的foreach和for遍历循环，以及系统函数，自定义函数的使用，数组遍历的模板语法以及定界符单引号双引号的使用

下一篇： JQuery基础知识

推荐阅读