Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS样式表优先级及模块化原理及实现
Blogger Information
Blog 17
fans 0
comment 0
visits 14774
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样式表优先级及模块化原理及实现
未来星
Original
929 people have browsed it

>CSS样式表优先级原则

优先级相同时，书写顺序决定优先级
选择器本身优先级大于书写顺序
样式声明优先级： id > class > tag

  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.     <!-- 内部样式，仅作用于该文档 -->
  9.     <style>
  10.       /* 样式声明优先级： id > class > tag */
  12.       /* 1,1,0 */
  13.       #str.abc {
  14.         color: violet;
  15.       }
  16.       /* 1,0,0 */
  17.       #str {
  18.         color: gold;
  19.       }
  21.       /* 0,1,0 */
  22.       .act {
  23.         color: tomato;
  24.       }
  25.       /* 选择器本身优先级大于书写顺序 */
  26.       /* 类样式 */
  28.       /* 0,0,2 */
  29.       body h1 {
  30.         color: green;
  31.       }
  33.       /* 优先级相同时，书写顺序决定优先级 */
  35.       /* 0,0,1 */
  36.       h1 {
  37.         color: red;
  38.       }
  39.     </style>
  40.   </head>
  41.   <body>
  42.     <h1>HELLO WORLD</h1>
  44.     <!-- 行内样式的优先级要高于style标签设置的内部样式 -->
  45.     <h1 style="color: blue">HELLO WORLD</h1>
  47.     <h1 class="act">HELLO WORLD</h1>
  49.     <h1 class="act" id="str">HELLO WORLD</h1>
  51.     <h1 class="abc" id="str">HELLO WORLD</h1>
  52.   </body>
  53. </html>

>样式表模块化实例

网站大量网页所共用的CSS样式表，推荐采用模块化书写方式，统一单独文件编写存储，在需要的网页文件中链接引用。

  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/index.css" />
  9.   </head>
  10.   <body>
  11.     <header>页头</header>
  12.     <main>主体</main>
  13.     <footer>页脚</footer>
  14.   </body>
  15. </html>

css/index.css文件：

  1. header {
  2.   background-color: lightblue;
  3.   height: 5em;
  4.   color: #fff;
  5. }
  6. footer {
  7.   background-color: lightblue;
  8.   height: 5em;
  9.   color: red;
  10. }
  11. main {
  12.   background-color: orange;
  13.   height: 10em;
  14. }

>伪类选择器的使用方法

  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.       .idx li {
  10.         background-color: lightgreen;
  11.       }
  13.       /* 结构伪类: 选择子元素, 要有一个父元素做为查询起点 */
  14.       /* .idx > :nth-child(3) {
  15.         background-color: violet;
  16.       } */
  17.       /* 匹配任何位置的元素
  18.       n = (0,1,2,3,4....) */
  19.       /* .idx > li:nth-child(0n + 3) {
  20.         background-color: violet;
  21.       } */
  23.       /* 分组伪类结构选择器,推荐使用 */
  25.       .idx li:first-of-type {
  26.         background-color: violet;
  27.       }
  28.       .idx li:last-of-type {
  29.         background-color: yellow;
  30.       }
  32.       .idx > li:nth-of-type(3) {
  33.         background-color: cyan;
  34.       }
  35.       .idx p:last-of-type {
  36.         background-color: blue;
  37.         color: white;
  38.       }
  39.       .idx p:nth-last-of-type(3) {
  40.         background-color: brown;
  41.         color: white;
  42.       }
  44.       /* 选择任何一个: :nth-of-type(n)
  45.       选择第一个: :first-of-type
  46.       选择最后一个: :last-of-type
  47.       选择倒数某一个: :nth-last-of-type()
  48.       唯一子元素的元素: :only-of-type */
  49.     </style>
  50.   </head>
  51.   <body>
  52.     <ul class="idx">
  53.       <li>item1</li>
  54.       <li>item2</li>
  55.       <li>item3</li>
  56.       <li>item4</li>
  57.       <li>item5</li>
  59.       <p>item6</p>
  60.       <p>item7</p>
  61.       <p>item8</p>
  63.       <li>item9</li>
  64.       <li>item10</li>
  65.     </ul>
  66.   </body>
  67. </html>
Correcting teacher：天蓬老师天蓬老师

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