Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS样式来源和优先级/CSS选择器与权重
Blogger Information
Blog 29
fans 1
comment 0
visits 14975
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
CSS样式来源和优先级/CSS选择器与权重
Pharaoh
Original
448 people have browsed it

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. }

效果：

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