Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 实例演示自定义样式的来源与优先级
Blogger Information
Blog 9
fans 0
comment 0
visits 3347
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
实例演示自定义样式的来源与优先级
杨雨辰
Original
330 people have browsed it

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

1.1自定义样式的来源

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

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.     <link rel="stylesheet" href="style.css" />
  9.     <!--  link标签  此为外部样式 -->
  11.     <style>
  12.       h1 {
  13.         color: black;
  14.       }
  15.     </style>
  16.         <!--  <style>标签  此为文档样式 -->
  17.   </head>
  18.   <body>
  19.     <h1 style="color: aliceblue">我是红色</h1>
  20.     <!-- style属性 此为内联样式 -->
  21.   </body>
  22. </html>

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

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

  1. /* 1.标签选择器 */
  3. h2 {
  4.   color: blue;
  5. }
  7. /* 2.属性选择器 */
  8. h2[title="welcome"] {
  9.   color: brown;
  10. }
  12. h2.h22 {
  13.   color: #000;
  14. }
  16. h2#h33 {
  17.   color: aqua;
  18. }
  20. /* 3.群组选择器 */
  21. h2#h55,
  22. h2.h66 {
  23.   background: #000;
  24. }
  26. /* 4.通配选择器：* */
  27. body * {
  28.   background-color: rgb(0, 226, 45);
  29. }
  31. /* 上下文选择器 */
  32. /* 1.子元素: > */
  33. .list > .item {
  34.   border: 2px solid;
  35. }
  36. /* 2. 后代元素: 空格 */
  37. .list .item {
  38.   border: 2px solid;
  39. }
  40. /* 3.相邻兄弟: + =隔壁，多个+号就是隔壁的隔壁*/
  41. .list > .item.five {
  42.   background: blue;
  43. }
  45. .list > .item.five + * + * + * {
  46.   background-color: gray;
  47. }
  49. /* 4.所有兄弟: ~  ~号选中往下有所元素*/
  50. .list > .item.five ~ * {
  51.   background-color: blanchedalmond;
  52. }

使用三位整数，表示选择器的因子权重
（百， 十 ， 个）
（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 以此类推

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post