css中更多选择器(scss同样可以使用)

后代选择器

.box p {}（选择的就是box的所有后代p标签）

/* 后代选择器(class 选择器 和标签选择器) 空格进行分割 */
.box p {
    color: red;
}
/* nav的后代 ul的后代 li的后代 a */
.nav ul li a {
    color: red;
}

子元素选择器

选择器1 > 选择器2（在使用的过程中，一定要明确选择的是子元素二不是后代元素）

/* 子元素选择器 */
.nav > a {
    color: red;
}

并集选择器

选择器1，选择器2.......{}（并集选择器是一次性选择多个元素，选择的元素可以使毫无关系）

/* 并集选择器 */
.p1 , .p2 {
    font-size: 20px;
}

hover伪类选择器

作用:选中鼠标悬停在元素上的状态，设置样式

语法：选择器:hover{css}

动画过度:transition:1s;

.box:hover{
    /* 鼠标悬浮在box身上发生的改变 */
    width: 150px;
    height: 150px;
    /* 透明 */
    background-color: transparent;
}

结构伪类选择器

1. :first-child：选择作为其父元素的第一个子元素的元素。
2. :last-child：选择作为其父元素的最后一个子元素的元素。
3. :nth-child(n)：选择作为其父元素的第 n 个子元素的元素，n 可以是一个数字、关键字 odd（奇数）或 even（偶数），也可以使用公式 an+b 来选择特定的位置。
4. :nth-last-child(n)：选择作为其父元素的倒数第 n 个子元素的元素。
5. :only-child：选择作为其父元素唯一一个子元素的元素。
6. :first-of-type：选择作为其父元素的特定类型的元素中的第一个元素。
7. :last-of-type：选择作为其父元素的特定类型的元素中的最后一个元素。
8. :nth-of-type(n)：选择作为其父元素的特定类型的元素中的第 n 个元素，n 的用法同 :nth-child。
9. :nth-last-of-type(n)：选择作为其父元素的特定类型的元素中的倒数第 n 个元素。
10. :only-of-type：选择作为其父元素中特定类型的元素中的唯一一个元素。

n的取值：

• 偶数：2n,event
• 奇数：2n+1,2n-1,odd
• 找到前5个: -n+5