选择器权重、伪类选择器、结构伪类选择器

实例演示选择器权重 并写出详细计算过程

选择器

1. tag标签选择器

   <h1>Hello world</h1>
   <style>
    /* 标签选择器 */
    h1{color:red;}
   </style>

   
2. clss选择器

   <h1 class="cls">Hello world</h1>
   <style>
    /* class选择器 */
    h1.cls{color:blue;}
   </style>

   
3. id选择器

   <h1 id="id">Hello world</h1>
   <style>
    /* id选择器 */
    h1#id{color:green;}
   </style>

   
4. 上下文选择器/层级选择器：子元素选择器、后代选择器、相邻兄弟选择器

   <ul class="list">
    <li class="item">item-1</li>
    <li class="item second">item-2</li>
    <li class="item">item-3</li>
      <ul class="inner">
        <li>item3-1</li>
        <li>item3-2</li>
        <li>item3-3</li>
      </ul>
    <li class="item">item-4</li>
    <li class="item">item-5</li>
    <li class="item">item-6</li>
    <li class="item">item-7</li>
    <li class="item">item-8</li>
   </ul>
   <style>
    /* 子元素选择器 > */
    .list>li{border:1px solid black;}
    /* 后代元素选择器 空格 */
    .list li{border:1px solid red;}
    /* 相邻兄弟选择器 */
    .item.second{background-color: aqua ;}
    .item.second +*{background-color: greenyellow;}
    /* 相邻所有兄弟选择器 */
    .item.second ~*{background-color: goldenrod;}
   </style>

   
5. 选择器的权重

   <h1 class="a" id="b">Hello world</h1>
   <style>
   /* 权重：(id,class,tag) */
    /* 权重值（1个id，0个clss，0个tag，值为1,0,0 ）*/
   #b{color: red;}
   /* 权重值（0个id，1个clss，1个tag，值为0,1,1 ）*/
   h1.a{color: aqua;}
   /* 权重值（0个id，0个clss，1个tag，值为0,0,1 ）*/
   h1{color: blue;}
   /* !important 调试样式，能覆盖所有的优先级，忽略任何权重 */
   h1{color: blueviolet !important;}
   </style>

使用bootstrap、elementUI、layUI等可以通过增加class属性来增加权重；

  <div class="col-md-3 a"></div>
  <!-- 在原有clss里添加a -->
  <style>
    div.col-md-3{height: 40px;background-color: aqua;}
    /* 通过增加class选择器，权重变化为(0,1,1)-->(0,2,1) */
    div.col-md-3.a{border: 1px solid;}
  </style>

文档样式权重大于外部引用样式

<style>/*文档样式*/</style>
<!-- 外部引用样式 -->
<link rel="stylesheet" herf="/static/style.css">

实例演示常用伪类选择器 并写出参数计算过程

伪类选择器：

  <ul class="title">
    <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>
    <li>item11</li>
    <li>item12</li>
    <li>item13</li>
    <li>item14</li>
  </ul>
  <style>
    /* 选择第一个 */
.title>li:first-of-type{background-color: blueviolet;}
/* 选择最后一个 */
.title>li:last-of-type{background-color: chocolate;}
/* 正数第六个 */
.title>li:nth-of-type(6){background-color: burlywood;}
/* 倒数第二个 */
.title>li:nth-last-of-type(2){background-color: burlywood;}
</style>

结构伪类选择器的参数计算

• 结构伪类选择器计算公式

  :nth-of-type(an+b)
  1、a：系数
  2、n：参数 1,2,3,4,……
  3、b：偏移量
  前3个：nth-of-type(-n+3)
  倒数3个：nth-last-of-type(-n+3)
  奇数：odd
  偶数：even

  <ul class="title">
    <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>
  </ul>
    <style>
    /* 选择所有的，计算为1n+0，简写为n */
    .title>li:nth-of-type(n){color: brown;}
     /* 选择第三个，计算为0n+3 */
    /* .title>li:nth-of-type(3){color: red;} */
    /* 选择第三个往后的 nth-of-type(n+3) */
    .title>li:nth-of-type(n+3){
      background-color: darkcyan;
    }
    /* 选择前三个：nth-of-type(-n+3) */
    .title>li:nth-of-type(-n+3){
      background-color: indigo;
    }
    /* 选择最后的3个：nth-last-of-type(-n+3) */
    .title>li:nth-last-of-type(-n+3){
      background-color: blueviolet;
    }
        /* 选择偶数个 */
    .title>li:nth-of-type(2n){background-color: aqua;}
    /* .title>li:nth-of-type(even){background-color: aqua;} */
    /* 选择奇数： */
    .title>li:nth-of-type(2n+1){background-color: blueviolet;}
    /* .title>li:nth-of-type(odd){background-color: aqua;} */
  </style>