选择器权重与常用伪类选择器的实例演示

1.选择器权重的实例演示

实现效果

选择器权重

关键代码

html

<h1>tag生效</h1>
<h1 class="class">class生效</h1>
<h1 id="id" class="class">id生效</h1>

css

h1 {
  color: red;
}
h1.class {
  color: green;
}
h1#id {
  color: blue;
}

计算过程

id 千位,class 百位,tag 个位

选择器	权重
h1 {color: red;}	(0,0,1)
h1.class {color: green;}	(0,1,0)
h1#id {color: blue;}	(1,0,0)

!important: 调试样式调试代码使用,权重最高

2. 常用伪类选择器的实例演示

1.结构伪类

实现效果

结构伪类

关键代码

<style>
  /* 选中第五个元素 */
  .content > li:nth-of-type(5) {
    color: red;
  }
  /* 选中第一个元素 */
  .content > li:first-of-type {
    color: green;
  }
  /* 选中最后一个元素 */
  .content > li:last-of-type {
    color: blue;
  }
  /* 选中倒数第五个元素 */
  .content > li:nth-last-of-type(5) {
    color: yellow;
  }
</style>
<body>
  <ul class="content">
    <li>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>

2.结构伪类参数

实现效果

结构伪类参数

关键代码

<style>
  /* 结构伪类参数:nth-of-type(an+b) */
  /* 匹配一个元素 */
  .content > li:nth-of-type(0n + 4) {
    color: red;
  }
  /* 匹配一组元素 */
  /* 匹配第5,6,7,...个元素 */
  .content > li:nth-of-type(n + 5) {
    color: green;
  }
  /* 计算过程:n+5(n=0,1,2,...)->5,6,7,... */
  /* 匹配第1,2,3个元素 */
  .content > li:nth-of-type(-n + 3) {
    color: blue;
  }
  /* 计算过程:-n+3(n=0,1,2...)->3,2,1 */
  /* 匹配奇数元素 */
  .content > li:nth-of-type(odd) {
    background-color: orange;
  }
  /* 计算过程:2n+1(n=0,1,2...)->1,3,5,...*/
  /* 匹配偶数元素 */
  .content > li:nth-of-type(even) {
    background-color: aqua;
  }
  /* 计算过程:2n(n=0,1,2...)->2,4,6,...*/
</style>
<body>
  <ul class="content">
    <li>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>