一、选择器知识html代码

<!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="style.css" />
  </head>
  <body>
    <h1>选择器</h1>
    <h1 title="hello">两个高频属性:id用#和class用.</h1>
    <h1 id="a">id用于匹配一组元素中的第一个</h1>
    <h1 class="b">class用于匹配一组元素</h1>
    <hr />
    <h2>上下文选择器/层级选择器</h2>
    <ul class="list">
      <li class="item">item1</li>
      <li class="item">item2</li>
      <ul class="inner">
        <li class="item2">item2-1</li>
        <li class="item2">item2-2</li>
      </ul>
      <li class="item">item3</li>
      <li class="item dige">item4</li>
      <li class="item">item5</li>
      <li class="item">item6</li>
      <li class="item">item7</li>
    </ul>
    <hr />
    <h3 class="title" id="active">
      选择器权重:为了css代码复用，不推荐使用id,因为权重太大，tag标签太少，语义化不强，所以建议用class
    </h3>
    <h2>文档样式 > 外部样式</h2>
    <ul>
      <li>id:千位</li>
      <li>class:百位</li>
      <li>tag:个位</li>
    </ul>
    <h1>调试样式:!important 最高指示，忽略任何权重</h1>
    <hr />
    <!-- 结构伪类 -->
    <ul class="fake">
      <li class="first">item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
      <li>item6</li>
      <li>item7</li>
      <li>item8</li>
      <li>item9</li>
      <li>item10</li>
    </ul>
  </body>
</html>

二、css部分代码

/* 外部样式 */
h1 {
  color: red;
}
h1[title="hello"] {
  color: green;
}
h1#a {
  color: aqua;
}
h1.b {
  color: blue;
}
/* 1.子元素：大于 > */
/* .list > li {
  border: 1px solid;
} */
/* 2.后代元素用： 空格 */
.list li {
  border: 1px solid;
}
/* 3.相邻关系用加号： + */
.item.dige {
  background-color: cyan;
}
/* 兄弟样式:下面两个都可以 */
/* .item.dige + li {
  background-color: violet;
} */
/* .item.dige + .item {
  background-color: violet;
} */
.item.dige + * {
  background-color: violet;
}
/* 选中所有兄弟用波浪线：~ */
.item.dige ~ * {
  background-color: violet;
}
/* 选择器的权重 */
h3 {
  color: red;
}
/* 同级时，按书写顺序，后面覆盖前面  */
h3 {
  color: aquamarine;
}
/* 权重：1，0，0 */
/* id权重 */
#active {
  color: blue;
}
/* class权重：0，1，2 */
body h3.title {
  color: red;
}
/* tag权重：0，0，2 */
body h3 {
  color: blueviolet;
}
/* 为了css代码复用，不推荐使用id,因为权重太大，tag标签太少，语义化不强，所以建议用class */
/* 调试样式:!important */
h1 {
  color: chartreuse !important;
}
/* 结构伪类 */
/* 传统方式 */
/* .fake > .first {
  background-color: aqua;
} */
/* 选中第一个 */
.fake > li:first-of-type {
  background-color: brown;
}
/* 选中最后一个 */
.fake > li:last-of-type {
  background-color: brown;
}
/* 选中倒数第2个 */
.fake > li:nth-last-of-type(3) {
  background-color: brown;
}
/* 伪类的参数 */
/* :nth-of-type(an+b)
a:系数，[0,1,2,3...]
n:[0,1,2,3...]
b:偏移量，从0开始
注意：计算出来的索引，必须是有效的，从1开始 */
/* 实际开发过程中的使用 */
/* 匹配第3个后面的所有的兄弟元素 */
.fake > :nth-of-type(n + 3) {
  background-color: blueviolet;
}
/* 反向取值：从第3个开始倒着取值：-n */
.fake > :nth-of-type(-n + 3) {
  background-color: blueviolet;
}
/* 倒数取值：从第3个开始倒着取值：-n */
.fake > :nth-last-of-type(-n + 3) {
  background-color: blueviolet;
}
/* 奇数：odd  */
.fake > :nth-of-type(odd) {
  background-color: blueviolet;
}
/* 偶数： even */
.fake > :nth-of-type(even) {
  background-color: blueviolet;
}

选择器知识汇总

一、选择器知识html代码

二、css部分代码