第三课选择器、模块化组件、伪类选择器 -

首页 > 博客列表 > 第三课选择器、模块化组件、伪类选择器

博主信息

博文 6

粉丝 0

访问量 4692

专题推荐

更多>

1、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>
  </head>
  <style>
    #box {
      font-size: large;
    } /* 增加一级选择器，优先级高于没有的后面的覆盖前面的样式 ,将忽略书写顺序*/
    #box .box1 .box2 {
      color: crimson;
    }
    #box .box1 {
      color: chartreuse;
    }
    .box1 {
      color: blue;
    }
    /* 同一级的class选择器后面的覆盖前面的样式 */
    .box1 {
      color: blueviolet;
    }
  </style>
  <body>
    <dic id="box">
      <!-- 行内样式 -->
      <div style="color: aqua">选择器的优先级</div>
      <!-- class选择器 -->
      <div class="box1">
        选择器的优先级
        <div class="box2">选择器的优先级</div>
      </div>
    </dic>
  </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>
  </head>
  <style>
    #box {
      font-size: large;
    } /* 增加一级选择器，优先级高于没有的后面的覆盖前面的样式 ,将忽略书写顺序*/
    #box .box1 .box2 {
      color: crimson;
    }
    #box .box1 {
      color: chartreuse;
    }
    .box1 {
      color: blue;
    }
    /* 同一级的class选择器后面的覆盖前面的样式 */
    .box1 {
      color: blueviolet;
    }
    table{
      border-collapse: collapse;
      widtH:60vw;
    }
    th,td{
      border: 2px solid blue;
    }
  </style>
  <body>
    <dic id="box">
      <!-- 行内样式 -->
      <div style="color: aqua">选择器的优先级</div>
      <!-- class选择器 -->
      <div class="box1">
        选择器的优先级
        <div class="box2">选择器的优先级</div>
      </div>
    </dic>
    <table style="border:1px solid blue ;">
      <tr >
        <th>选择器名</th>
        <th>表达式</th>
        <th>定义</th>
        <th>优先级</th>
      </tr>
      <tr>
        <td>标签名选择器</td>
        <td>div { color：Red;}</td>
        <td>即页面中的各个标签名的css样式</td>
        <td>优先 第一级</td>
      </tr>
      <tr>
        <td>类选择器</td>
        <td>.divClass {color:Red;}</td>
        <td>/即定义的每个标签的class 中的css样式</td>
        <td>优先第二级</td>
      </tr>
      <tr>
        <td>ID选择器 </td>
        <td> #myDiv {color:Red;} </td>
        <td>即页面中的标签的id</td>
        <td>优先第三级</td>
      </tr>
      <tr>
        <td>后代选择器（类选择器的后代选择器）</td>
        <td>divClass span { color:Red;} </td>
        <td>即多个选择器以逗号的格式分隔 命名找到准确的标签</td>
        <td>优先第四级</td>
      </tr>
      <tr>
        <td>群组选择器</td>
        <td>div,span,img {color:Red}</td>
        <td>即具有相同样式的标签分组显示</td>
        <td>优先第五级</td>
      </tr>
      <tr>
        <td colspan="4">选择器的优先级:
        </br>
          1.最高优先级是 (直接在标签中的设置样式，假设级别为1000)&lt div style="color:Red;"&gt &lt /div&gt;
          2.次优先级是（ID选择器 ,假设级别为100） #myDiv{color:Red;}</td>
        <!-- <td></td>
        <td></td>
        <td>优先第五级</td> -->
      </tr>
    </table>
  </body>
</html>
```![](https://img.php.cn/upload/image/227/893/639/1616671045590969.png)
|选择器名|表达式|定义|优先级|
|---|---|---|---|
|权重 ！important|div { color：Red; color:lime !important;}|一般调试用|级别最高级|
|标签名选择器|div { color：Red;}|即页面中的各个标签名的css样式|优先 第一级|
|类选择器|divClass {color:Red;}|即定义的每个标签的class 中的css样式|优先第二级|
|ID选择器|#myDiv {color:Red;}|即页面中的标签的id|优先第三级|
|后代选择器（类选择器的后代选择器）|divClass span { color:Red;}|即多个选择器以逗号的格式分隔 命名找到准确的标签|优先第四级|
|群组选择器|div,span,img {color:Red}|即具有相同样式的标签分组显示|优先第五级|
###选择器的优先级:
1.最高优先级是 (直接在标签中的设置样式，假设级别为1000)<div style="color:Red;"> </div>;
2.次优先级是（ID选择器 ,假设级别为100） #myDiv{color:Red;}</td>;

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

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>
    <link rel="stylesheet" href="css/public.css" />
  </head>
  <body>
    <header class="head">页眉</header>
    <main class="subject">主体</main>
    <footer class="foot">页脚</footer>
  </body>
</html>

css组件

1、public（公共）组件

@import url(header.css);
@import url(main.css);
@import url(footer.css);
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
  color: #000;
}

2、header（头部）组件

head {
  height: 4rem;
  background-color: #eee;
}

3、 main（主体）组件

.subject {
  height: 15rem;
  background-color: antiquewhite;
}

.foot {
  height: 5rem;
  background-color: #888;
}

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

<!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/public.css" /> -->
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      a {
        text-decoration: none;
        color: rgb(74, 240, 124);
      }
      a:hover {
        color: #c81623;
      }
      ul,
      li {
        list-style: none;
      }
      /* 根据元素的位置或坐标选择 */
      ul li {
        background-color: beige;
      }
      /* 下面的LI全部选种 */
      /* ul > li {
        background-color: beige;
      } */
      /* 只选种子元素，不选种孙子元素 */
      /* body > ul > li {
        background-color: blue;
      } */
      /* 同级相邻选择器 + */
      /* .last + li {
        background-color: blueviolet;
      } */
      /* 同级相邻所有以下元素用 ~ */
      /* .last ~ li {
        background-color: blueviolet;
      } */
      /* 伪类选择器 */
      /* 结构伪类选择子元素的 */
      /* (0n + 3) 0为1时为单数，2为偶籹；当前面为0时3就是所要选择的指定位置*/
      /* .list > :nth-of-type(0n + 3) {
        background-color: crimson;
      } */
      /* 选择第1个方法 */
      .list > :nth-of-type(1) {
        background-color: crimson;
      }
      .list>:first-of-type: {
        background-color: darkblue;
      }
      /* 最后一个 */
      .lisr > :nth-of-type(5) {
        background-color: darkcyan;
      }
      .lisr > :last-of-type {
        background-color: darkgoldenrod;
      }
      /* 倒数每几个 */
      .list > li:nth-last-of-type(3) {
        background-color: antiquewhite;
      }
      /* 最后一个 */
      .lisr > p:nth-of-type(4) {
        background-color: darkcyan;
      }
      .lisr > p:last-of-type {
        background-color: darkgoldenrod;
      }
      /* 倒数第几个 */
      .list > p:nth-last-of-type(3) {
        background-color: darkseagreen;
      }
      /* 只有一个子元素的 */
      ul li:only-of-type {
        background-color: rgb(231, 231, 13);
      }
    </style>
  </head>
  <body>
    <ul class="list">
      <li>导航1<a href="">&nbsp页眉</a></li>
      <li>导航2<a href="">&nbsp左侧边栏</a></li>
      <li class="last">导航3<a href="">&nbsp主体</a></li>
      <li>
        <!-- <ul>
          <li>&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp页面1</li>
          <li>&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp页面2</li>
          <li>&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp页面3</li>
          <li>&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp页面4</li>
          <li>&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp页面5</li>
        </ul> -->
        导航4<a href="">&nbsp右侧边栏</a>
      </li>
      <p>内容1</p>
      <p>内容2</p>
      <p>内容3</p>
      <p>内容4</p>
      <li>导航5<a href="">&nbsp页脚</a></li>
    </ul>
    <ul>
      <li>只有一个的</li>
    </ul>
  </body>
</html>