<style>
/* nth-child是将父元素下的所有子元素当成同一个分组，然后匹配位置，再匹配其他的条件 */
.text:first-child{
color:red
}
p:nth-child(3){
color:green
}
/* nth-of-type */
/* 如果有设置匹配元素标签，先找到父节点下同为一个元素标签的节点，然后再匹配位置，然后再其他其他要求 */
/* 如果一开始没有设置要匹配那种类型的节点，那么就会将父元素下的所有节点按元素标签分组，然后再匹配位置，匹配其他条件 */
.text1:nth-of-type(1){
color:blue
}
.text1:nth-of-type(2){
color:greenyellow
}
.text1:nth-of-type(3){
color:rgb(226, 40, 152)
}
.text1:nth-of-type(4){
color:#7a4284
}
/* 循环设置子节点的样式 */
/* 按照奇偶设置,索引从1算起 */
/* odd匹配奇数 */
p:nth-child(odd){
background-color:#27dae7
}
/* even匹配偶数 */
div:nth-child(even){
background-color:#e77727
}
/* 按照倍数设置（an+b）a是循环的倍数，n是一个计数器（从0开始），b是偏移的数量，只有公式的索引才从0算起 */
/* 先按照倍数找到匹配的子元素，在计算偏移 */
/* -n+3找到的范围是[-Infinity,3],所以这个会匹配前3个元素 */
p:nth-child(-n+3){
padding-left:20px
}
/* 这个表明是选择一个范围既属于[-Infinity,3]，又属于[2,Infinity]的数据 */
p:nth-child(-n+3):nth-child(n+2){
border:10px solid #b63636
}
/* 用not去掉不想要的元素 */
/* 匹配除了属于[-Infinity,3]，又属于[2,Infinity]范围外的p标签 */
p:not(:nth-child(-n+3):nth-child(n+2)){
border-left:15px solid #9fb636
}
</style>
<div class="">
<p class="text1">p-text1</p>
<div class="text">div-text</div>
<p class="text1">p-text1</p>
<div class="text1">div-text1</div>
<p class="text">p-text</p>
<p class="text">p-text</p>
<div class="text1">div-text1</div>
<div class="text1">div-text1</div>
</div>
效果图：
