基本几种简单选择器

层次选择器

后代选择器：

/*
后代选择器
某个元素的后面 祖爷爷 爷爷 爸爸 你
*/
body p{
background: red;
}

子代选择器：

/子代选择器 一代 儿子/
body > p {
background: yellow;
}

相邻兄弟选择器：

.active +p{
background: palegreen;
}

通用选择器

/*通用选择器
当前选择元素向下所有的兄弟元素
*/
.active~p{
background: slateblue;
}

结构伪类选择器：

/ul的第一个一个子元素，不使用我们的class和id选择器/
/ul li:last-child{/
/* background:paleturquoise;/
/}/
/ul的最后一的元素，不使用我们的class和id选择器/
/ ul li:first-child{
background: chartreuse;
}/

/选择当前p元素的第三个类型/
/p:nth-child(4){/
/ background: chartreuse;/
/}*/
/选择父类元素下的p元素的第三个类型/
p:nth-of-type(2){
background: cornflowerblue;
}

属性选择器：

属性选择器：属性名=属性值（正则表达式）

a[]{
}
/
a[id]{
background: red;
}
a[id=first]{
background: yellowgreen;
}
/
class中有link的元素的
*=:包含等于
=：绝对等于
/
a[class=“link”]{
background: fuchsia;
}
/选中href中的以https开头的元素/
a[href^=https]{
background: slateblue;
}
/选中href中的以png结尾的元素/
a[href$=png]{
background: #4158D0;
}