ASCII码 ASCII码

自定义样式的来源和优先级/css常用选择器和选择器权重分析

发布于：2022-07-08 12:40:08  栏目：技术文档

样式来源

1.内联样式

l59oudwp.png

  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>1.内联样式</title>
  8.     </head>
  9.     <body>
  10.         <h1 style="color: red">iteme1</h1>
  11.     </body>
  12. </html>

2.内部样式/文档样式

l59oxys9.png

  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>2.内部样式</title>
  8.         <style>
  9.             h1 {
  10.                 color: red;
  11.             }
  12.         </style>
  13.     </head>
  14.     <body>
  15.         <h1>Hello world</h1>
  16.     </body>
  17. </html>

3.外部样式

l59p1euy.png

  1. <!DOCTYPE html>
  3. <html lang="en">
  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>3.外部样式</title>
  9.         <link rel="stylesheet" href="css/demo3.css" />
  10.     </head>
  11.     <body>
  12.           <!-- HTML代码部分 -->
  13.         <h1>外部样式</h1>
  14.     </body>
  15. </html>
  1. /*demo3.css文件内容*/
  2. h1 {
  3.     color: red;
  4. }

样式优先级

l59p7l1q.png

  • HTML部分代码
  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="css/demo4.css" />
  9.         <style>
  10.             h1 {
  11.                 color: aqua;
  12.             }
  13.         </style>
  14.     </head>
  15.     <body>
  16.         <h1 style="color: red">样式来源与优先级：内联样式>内部样式>外部样式</h1>
  17.     </body>
  18. </html>
  • css部分代码
  1. h1 {
  2.     color: blue;
  3. }

常用选择器

l59r24ww.png

  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.         <style>
  9.             /*1.标签选择器：将所有p标签文字颜色设置为红色 使用标签进行选择*/
  10.             p {
  11.                 color: red;
  12.             }
  13.             /* 2.属性选择器：将带有title属性的p标签文字颜色更改颜色 使用标签内的属性特征选择*/
  14.             p[title="属性选择器"] {
  15.                 color: aqua;
  16.             }
  17.             /* 3.class选择器：将class为one的p标签文字颜色更换 使用.加上对应的class名称选择 */
  18.             .one {
  19.                 color: yellow;
  20.             }
  21.             /* 4.id选择器：将id为two的p标签文字颜色更换 使用#加上对应的ID名称选择*/
  22.             #two {
  23.                 color: blue;
  24.             }
  25.             /* 5. 群组选择器：同时选中第二个和第三个P标签 使用,号隔开 */
  26.             p[title="属性选择器"],
  27.             .one {
  28.                 background-color: cadetblue;
  29.             }
  30.             /* 上下文选择器---- */
  31.             /* 子元素选择器： >*/
  32.             .a > .b {
  33.                 border: 1px solid #000;
  34.             }
  35.             /* 后代选择器： 空格 */
  36.             .a .b {
  37.                 background-color: violet;
  38.             }
  39.             /* 兄弟选择器: + 通过第三个选择第四个*/
  40.             .b:nth-of-type(3) {
  41.                 background-color: lawngreen;
  42.             }
  43.             /* 通配选择器：*  */
  44.             .b:nth-of-type(3) + * {
  45.                 background-color: yellow;
  46.             }
  47.             /* 选择所有兄弟：~ */
  48.             .b:nth-of-type(3) ~ * {
  49.                 background-color: yellow;
  50.             }
  51.         </style>
  52.     </head>
  53.     <body>
  54.         <p>标签选择器</p>
  55.         <p title="属性选择器">属性选择器</p>
  56.         <p class="one">class选择器</p>
  57.         <p id="two">id选择器</p>
  58.         <ul class="a">
  59.             <li class="b">item1</li>
  60.             <li class="b">item2</li>
  61.             <li class="b">item3</li>
  62.             <li class="b">item4</li>
  63.             <li class="b">item5</li>
  64.         </ul>
  65.     </body>
  66. </html>

选择器权重

众所周知css代码默认是受书写顺序影响的例如:

l59qjf35.png

  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="css/demo6.css" />
  9.         <style></style>
  10.     </head>
  11.     <body>
  12.         <div>
  13.             <h1 id="a" class="b">选择器权重分析</h1>
  14.         </div>
  15.     </body>
  16. </html>
  1. /*
  2. 选择器权重（重点！）
  3. 选择器权重通畅可以看为三个整数 百位 十位 各位
  4. 分别对应了id class tag标签
  5. 例如
  6. h1{
  7.     color:red;
  8. }
  9. 权重就是0, 0 ,1：也就是0个id 0个class 1个标签
  10. h1 .a{
  11.     color:red;
  12. }
  13. 权重就是0, 1 ,1：也就是0个id 1个class 1个标签
  15. 选择器尽量避免使用ID进行选择，因为id权重太高一旦使用后面修改可能会带来麻烦
  16. 下面是选择器权重的详细代码介绍
  17. */
  18.  h1 {
  19.     color: red;
  20. }
  22. h1 {
  23.     color: yellow;
  24. }
  • 那么字体颜色红色将会被黄色覆盖那么我们如何让红色在不改变位置的情况下显示出来呢
  1.  /* 方法1：改变后权重为0 , 0, 2 */
  2. body h1 {
  3.     color: red;
  4. }
  5. /*0, 0, 1*/
  6. h1 {
  7.     color: yellow;
  8. }
  10. /* 方法2： */
  11. /* 此时权重为 0 , 1 , 1 */
  12. h1.b {
  13.     color: red;
  14. }
  15. /* 0 , 0 ,1 */
  16. h1 {
  17.     color: yellow;
  18. }
  19. /* 方法3： */
  20. /* 1 , 0 , 1 */
  21. h1#a {
  22.     color: red;
  23. }
  24. /* 0 , 0 , 1 */
  25. h1 {
  26.     color: yellow;
  27. }

方法1：l59qveqt.png

方法2：l59qvyk7.png

方法3：l59qsx9z.png

相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行