【结构伪类和否定伪类】

结构伪类总结

用题目的形式，来了解常见伪类结构。

结构伪类

1.表示修改前4个元素的样式为字体大小为20px

/* 前几个 */
    div > div:nth-child(-n + 4) {
      font-size: 20px;
    }

2.表示修改第三个li的样式为红色

ul li:nth-child(3) {
      color: red;
    }

3.表示修改第2n+1个li的样式为蓝色

ul li:nth-child(2n + 1) {
      color: blue;
    }

4.表示修改倒数第二个元素为红色

/* 倒数的某一个时 */
    ul > li:nth-last-child(2) {
      color: red;
    }

5.表示修改倒数3个li元素的字体大小为20px

/* 倒数的后几个时 */
    ul > li:nth-last-child(-n + 3) {
      font-size: 20px;
    }

6.选择box中的div元素, 并且是第三个子元素

 /* 需求: 选择box中的div元素, 并且是第三个子元素 */
    .box > div:nth-child(3) {
      color: red;
    }

7.需求: 选择box中的第三个div元素(排除所有的干扰项)

.box > div:nth-of-type(3) {
      color: blue;
    }

否定伪类

1.否定伪类

• :not(x)表示除x以外的元素
  代码如下：

.box :not(.zyj) {
      color: red;
    }

这段代码的意思就是在class属性为box中的 并且class部位zyj的所有元素。