ASCII码 ASCII码

CSS样式来源和优先级/CSS选择器与权重

发布于：2022-07-07 13:27:33  栏目：技术文档

CSS样式来源和优先级

CSS有三种样式：内联样式，内部样式，外部样式样式优先级为：内联样式>内部样式>外部样式

内联样式

在标签内部通过style属性设置元素样式<p style="color: red;">我是内联样式</p>

内部样式

把样式写到head标签中的style标签中，通过选择器，来设置元素样式

  1. <head>
  2.     <style>
  3.         h1 {
  4.             color:blue;
  5.         }
  6.     </style>
  7. </head>

外部样式

写一个外部css文件，在head标签中使用link标签引用它

  1. h2 {
  2.     color: darkorange;
  3. }
  4. /*style.css文件与下面的demo.html位于同一目录下*/
  6. <!DOCTYPE html>
  7. <html>
  8.     <head>
  9.         <meta charset="utf-8">
  10.         <title>外部样式</title>
  11.         <style>
  12.             h1{
  13.                 color:coral;
  14.             }
  15.         </style>
  16.         <link rel="stylesheet" href="./style.css">
  17.     </head>
  18.     <body>
  19.         <h1>我是内部样式</h1>
  20.         <h2>我是外部样式</h2>
  21.         <p style="color: red;">我是内联样式</p>
  22.     </body>
  23. </html>

效果：

选择器与权重

CSS选择器用于选取要设置的HTML元素内联样式>ID 选择器>类选择器=属性选择器=伪类选择器>标签选择器= 伪元素选择器

名称 用法
id选择器 #myid
类选择器 .classname
标签选择器 div
群组选择器 div,h1,p
相邻选择器 h1+p
子选择器 ul > li
后代选择器 li a
通配符选择器 *
属性选择器 a[rel=”external”]
伪类选择器 a:hover, li:nth-child

权重计算规则

  • ID选择器，如：#content，权值为100
  • 类，伪类、属性选择器，如.content，权值为010
  • 类型选择器、伪元素选择器，如div p，权值为001
  • 通配符、子选择器、相邻选择器等。如* > +，权值为000
  • 继承的样式没有权值

权重比较规则

  • 1,0,0 > 0,99,99
  • 在权重相同的情况下，后面的样式会覆盖掉前面的样式
  • 通配符、子选择器、相邻选择器等的。虽然权值为000，但是也比继承的样式优先，0 权值比无权值优先

!important

!important的作用是提升优先级，加了!important样式的优先级是最高的（比内联样式的优先级还高，尽量在调试的时候使用)

实例

  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="style.css">
  9. </head>
  10. <body>
  11.     <ul>
  12.         <li>
  13.             <p>item1</p>
  14.         </li>
  15.         <li class="two">
  16.             <p>item2</p>
  17.         </li>
  18.         <li>
  19.             <p>item3</p>
  20.         </li>
  21.         <li>
  22.             <p>item4</p>
  23.         </li>
  24.         <li>
  25.             <p>item5</p>
  26.         </li>
  27.         <li>
  28.             <p>item6</p>
  29.         </li>
  30.     </ul>
  31. </body>
  32. </html>
  1. /* CSS文件 */
  2. li {
  3.     border: 1px solid;
  4.     background-color: aquamarine;
  5. }
  7. ul > .two {
  8.     background-color: blue;
  9. }
  12. body li {
  13.     background-color: red;
  14. }

效果：

相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行