CSS样式表优先级及模块化原理及实现

>CSS样式表优先级原则

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 内部样式，仅作用于该文档 -->
    <style>
      /* 样式声明优先级： id > class > tag */
      /* 1,1,0 */
      #str.abc {
        color: violet;
      }
      /* 1,0,0 */
      #str {
        color: gold;
      }
      /* 0,1,0 */
      .act {
        color: tomato;
      }
      /* 选择器本身优先级大于书写顺序 */
      /* 类样式 */
      /* 0,0,2 */
      body h1 {
        color: green;
      }
      /* 优先级相同时，书写顺序决定优先级 */
      /* 0,0,1 */
      h1 {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>HELLO WORLD</h1>
    <!-- 行内样式的优先级要高于style标签设置的内部样式 -->
    <h1 style="color: blue">HELLO WORLD</h1>
    <h1 class="act">HELLO WORLD</h1>
    <h1 class="act" id="str">HELLO WORLD</h1>
    <h1 class="abc" id="str">HELLO WORLD</h1>
  </body>
</html>

>样式表模块化实例

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>样式表模块化</title>
    <link rel="stylesheet" href="css/index.css" />
  </head>
  <body>
    <header>页头</header>
    <main>主体</main>
    <footer>页脚</footer>
  </body>
</html>

css/index.css文件：

header {
  background-color: lightblue;
  height: 5em;
  color: #fff;
}
footer {
  background-color: lightblue;
  height: 5em;
  color: red;
}
main {
  background-color: orange;
  height: 10em;
}

>伪类选择器的使用方法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>伪类选择器</title>
    <style>
      .idx li {
        background-color: lightgreen;
      }
      /* 结构伪类: 选择子元素, 要有一个父元素做为查询起点 */
      /* .idx > :nth-child(3) {
        background-color: violet;
      } */
      /* 匹配任何位置的元素
      n = (0,1,2,3,4....) */
      /* .idx > li:nth-child(0n + 3) {
        background-color: violet;
      } */
      /* 分组伪类结构选择器,推荐使用 */
      .idx li:first-of-type {
        background-color: violet;
      }
      .idx li:last-of-type {
        background-color: yellow;
      }
      .idx > li:nth-of-type(3) {
        background-color: cyan;
      }
      .idx p:last-of-type {
        background-color: blue;
        color: white;
      }
      .idx p:nth-last-of-type(3) {
        background-color: brown;
        color: white;
      }
      /* 选择任何一个: :nth-of-type(n)
      选择第一个: :first-of-type
      选择最后一个: :last-of-type
      选择倒数某一个: :nth-last-of-type()
      唯一子元素的元素: :only-of-type */
    </style>
  </head>
  <body>
    <ul class="idx">
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
      <p>item6</p>
      <p>item7</p>
      <p>item8</p>
      <li>item9</li>
      <li>item10</li>
    </ul>
  </body>
</html>

>CSS样式表优先级原则

>样式表模块化实例

>伪类选择器的使用方法

相关文章