一.选择器的优先级,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>层叠与优先级</title>
    <style>
      /* 1,1,3 */
      html body h1#first.active {
        color: palevioletred;
      }
      /* id选择器优先级大于class */
      /* 1,0,3 */
      html body h1#first {
        color: lightblue;
      }
      /* 1,0,2 */
      body h1#first {
        color: beige;
      }
      /* 选择器本身优先级大于书写顺序 */
      /* 样式类 */
      /* 0,1,2 */
      body h1.active {
        color: blue;
      }
      /* 0,1,1 */
      h1.active {
        color: yellow;
      }
      /* 标签选 */
      /* 0,0,3 */
      html body h1 {
        color: green;
      }
      /* 优先级相同时，书写顺序决定优先级 */
      /* 0,0,3 */
      html body h1 {
        color: red;
      }
      /* 样式类
      .active {
        color: blue;
      }*/
      /* #first {
        color: lightblue;
      }*/
    </style>
  </head>
  <body>
    <h1 class="active" id="first">Hello Woreld</h1>
  </body>
</html>
<!-- 公式：id >class >tag -->

二.前端组件样式模块化的原理与实现

mokuai

<!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" />
    <!-- header { 1em=16px,3em=48px min-height: 3em; background-color: #ddd; }
      main { 1em=16px,3em=48px min-height: 20em; background-color: lightcyan; }
      footer { 1em=16px,3em=48px min-height: 3em; background-color: #999; }
    @import url(css/header.css); @import url(css/mian.css); @import
    url(css/footer.css); 
    <style>
      @import url(css/index.css);
    </style> -->
  </head>
  <body>
    <header>页眉</header>
    <main>主体</main>
    <footer>页脚</footer>
  </body>
</html>

三.常用伪类选择器的使用方式及伪类来模块化元素组件（表单、表格）

组件表单表格

<!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>
      /* 结构伪类：选择子元素，只要有一个父元素作为查询起点 */
      /* .list > :nth-child(3) {
        background-color: violet;
      } */
      /* 匹配任何位置元素
      n = （0，1，2，3，4.....) */
      /* .list > li:nth-child(0n + 3) {
        background-color: violet;
      } */
      /* 分组伪类结构选择器,推荐使用 */
      .list > li:nth-of-type(3) {
        background-color: cyan;
      }
      /* 选择中第一个p /li  */
      .list > p:nth-of-type(1) {
        background-color: lightgreen;
      }
      .list > li:nth-of-type(1) {
        background-color: lightgreen;
      }
      .list > li:nth-of-type(7) {
        background-color: green;
      }
      /* 最后一个p */
      .list > p:nth-of-type(3) {
        background-color: red;
      }
      .list p:last-of-type {
        background-color: blue;
      }
      .list p:first-of-type {
        background-color: red;
      }
      /* 选择倒数第三个 */
      .list > li:nth-last-of-type(3) {
        background-color: yellow;
      }
      ul > li:only-of-type {
        background-color: turquoise;
      }
    </style>
  </head>
  <body>
    <ul class="list">
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
      <li>item6</li>
      <p>item7</p>
      <p>item8</p>
      <li>item9</li>
      <p>item10</p>
    </ul>
    <ul>
      <li>item</li>
    </ul>
  </body>
  <!-- 选择任何一个：nth-of-type(n) 选择第一个：first-of-type
  选择最后一个：last-of-type 选择倒数某一个：nth-last-of-type(n)
  选择唯一子元素得元素：only-of-type-->
</html>

<!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>组件化编程思想t</title>
    <style>
      /* 只有获取到页面中得某个元素组件得入口，
      再根据子元素得位置，使用伪类就可以选择任何一个元素了 */
      /* 选择首页 */
      /* .index {
        background-color: yellow;
      } */
      /* menu是入口 */
      /* .menu :first-of-type {
        background-color: tomato;
      }
      .menu :last-of-type {
        background-color: turquoise;
      }
      .menu :nth-last-of-type(2) {
        background-color: yellow;
      }
      .menu :nth-last-of-type(3) {
        background-color: turquoise;
      } */
      @import url(css/menu.css);
      @import url(css/login.css);
      /* 只要获取表单得入口，使用伪类可以获取表单中任何一个控件 */
      /* 获取到提交按钮 */
      /* .login button {
        background-color: turquoise;
        color: black;
      } */
      /* .login :only-of-type {
        background-color: green;
        color: black;
      }
      .login :first-of-type {
        background-color: burlywood;
        color: black;
      }
      .login :nth-last-of-type(2) {
        background-color: blanchedalmond;
        color: black;
      }
      .login :nth-of-type(3) {
        background-color: red;
        color: black;
      } */
    </style>
  </head>
  <body>
    <nav class="menu">
      <a href="">首页</a>
      <a href="">视频</a>
      <a href="">下载</a>
      <a href="">注册/登录</a>
    </nav>
    <hr />
    <form action="" style="display: grid; gap: 1rem" class="login">
      <input type="text" placeholder="username" />
      <input type="password" placeholder="password" />
      <input type="email" placeholder="demo@email" />
      <button>提交</button>
    </form>
  </body>
</html>

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

地图链接.内联框架

2021-03-22 16:29:03