1.实例演示选择器的优先级,id,class,tag;

<!DOCTYPE html>
<html lang="zh-CN">
  <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>
      /* 1,1,3 */
      html body h1#first.active {
        color: rgb(230, 17, 183);
      }
      /* id选择器,优先级大于class */
      /* 1,0,3 */
      html body h1#first {
        color: rgb(59, 17, 158);
      }
      /* 1,0,2 */
      body h1#first {
        color: blue;
      }
      /* 选择器本身优先级大于书写顺序 */
      /* 类样式 */
      /* 0,1,2 */
      html h1.active {
        color: seagreen;
      }
      /* 0,1,1 */
      h1.active {
        color: yellow;
      }
      /* 标签 * * 优先级相同时,书写顺序决定优先级 */
      /* 0, 0, 3 */
      html body h1 {
        color: rgb(10, 133, 10);
      }
      /* 0, 0, 3 */
      html body h1 {
        color: rgb(131, 39, 216);
      }
    </style>
  </head>
  <body>
    <h1 class="active" id="first">3月22日的练习</h1>
    <h2>id 大于 class 大于 tag，关键是要分清有多少个id,多少个class,多少个tag</h2>
  </body>
</html>

2.实例演示前端组件样式模块化的原理与实现;

<!DOCTYPE html>
<html lang="zh-CN">
  <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" />
    <!-- 使用外部样式方式二 -->
    <!-- <style>
      @import url(css/index.css);
    </style> -->
  </head>
  <body>
    <header>页眉</header>
    <main>主体</main>
    <footer>页脚</footer>
  </body>
</html>
<!--index.css文件-->
@import url(header.css);
@import url(main.css);
@import url(footer.css);
<!--heater.css文件-->
header {
  min-height: 3em;
  background-color: rgb(143, 167, 245);
}
<!--main.css文件-->
main {
  min-height: 20em;
  background-color: rgb(197, 231, 133);
}
<!--footer.css文件-->
footer {
  min-height: 5em;
  background-color: rgb(144, 163, 226);
}

3.实例演示常用伪类选择器的使用方式，并用伪类来模块化元素组件(例如表单或列表）

<!DOCTYPE html>
<html lang="zh-CN">
  <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>
   /* 选择任何一个: :nth-of-type(n)
      选择第一个: :first-of-type
      选择最后一个: :last-of-type
      选择倒数某一个: :nth-last-of-type()
      唯一子元素的元素: :only-of-type */
   /* .list :nth-of-type(3) {
        background-color: lightgreen;
      }
  .list :first-of-type {
        background-color: red;
      }
  .list :last-of-type {
        background-color: blue;
      } 
  .list > li:nth-last-of-type(3) {
        background-color: yellow;
      }
  ul li:only-of-type {
        background-color: yellow;
      }  */   
   @import url(css/list.css);
    </style>
  </head>
  <body>
    <ul class="list">
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
      <li>item6</li>
    </ul>
    <ul>
      <li>item</li>
    </ul>
  </body>
</html>
 list.css文件
/*伪类模块化列表*/
.list :nth-of-type(3) {
        background-color: lightgreen;
      }
  .list :first-of-type {
        background-color: red;
      }
  .list :last-of-type {
        background-color: blue;
      } 
  .list > li:nth-last-of-type(3) {
        background-color: yellow;
      }
  ul li:only-of-type {
        background-color: yellow;
      }

3.22作业-0411

1.实例演示选择器的优先级,id,class,tag;

2.实例演示前端组件样式模块化的原理与实现;

3.实例演示常用伪类选择器的使用方式，并用伪类来模块化元素组件(例如表单或列表）

更多相关文章

随机推荐