在CSS中的学习中css选择器的层次关系，选择器是其中一个重要的内容，想要全部理解透彻也需花费一点时间。下面分为五大类来理解每一种选择器。
基本选择器 1.标签选择器
即选择页面上所有该标签，经常用来描述必要的共同特性。
举例：
/*页面所有的p标签字体颜色变红*/
p{
color: red;
}
/*页面所有的div标签背景颜色变蓝*/
div{
background-color: blue;
}
1233
<p>111
1233
  111
1233
</p>
2.id选择器
即选中该页面中id为指定值的元素，且一个页面中的id一定是只唯一标识一个元素的。
举例：
/*将id为one标签字体颜色设置为红色*/
/*用id进行标识时一定不要忘记 "#" */
#one{
color: red;
}
/*将id为two标签的背景颜色设置为蓝色*/
#two{
background-color: blue;
}
1233
<p id="one">111
1233
  111
1233
</p>
3.class选择器
与id选择器类似，选中class为指定值的元素，但与id不同的是它可以标识不同的元素。
举例（第一种使用方法）：
/*将class为one标签字体颜色设置为红色*/
/*用class进行标识时一定不要忘记 " . "（英文的点）*/
.one{
color: red;
}
1233
<p>111
1233
</p>
第二种使用方法：
/*将class为wrap标签的背景颜色设置为灰色*/
.wrap{
background-color: grey;
}
/*将class为two标签的字体颜色设置为黑色*/
.two{
color:black;
}
/*将class为three标签的字体颜色设置为红色*/
.three{
color:red;
}
1233
/*class的两个标识只需用一个空格隔开即可*/
<p class="wrap two">111
1233
  111
1233
</p>
4.逗号分隔的选择器
当某两个不同的标签有共同的特性时可使用该选择器
举例：
/*一般有好几种组合方式*/
/*第一种*/
div,span,p{....[css][3]样式...}
/*第二种*/
div,#name{....css样式...}
/*第三种*/
.wrap,#name{....css样式...}
.....等等多种组合方式，在此不一 一列举，可自己举一反三尝试
5.组合选择器
形如 div#wrap 即选择div中id为wrap的元素将其背景色设置为灰色。
举例：
/*选择div中id为wrap的元素将其背景色设置为灰色*/
div#wrap{
background-color: grey;
}
.two{
color:blue;
}
1233
<p>111
1233
  111
1233
</p>
6.通配选择器
通配选择器用一个 * 来表示css选择器的层次关系，即页面所有标签元素都被选择了，多用于重置块元素标签的、等。
举例：
/*页面所有标签字体颜色设置为红色*/
*{
color: red;
}
1233
<p>111
1233
  111
1233
</p>
层次选择器 1.子元素选择器
形如：div>p 选取的是指定id（或class或标签元素div等）下包含的指定子元素
举例：
/* 选中的是div的子元素p，li下的p不属于div的子元素，li的p应属于ul的子元素*/
div>p{
color: red;
}
<p>1
  2
  3
  4
  5
  6
</p>
结果：
下面是一张根据子元素选择器举例的代码画的关于子元素与后代元素的区分：
注意: 子元素也属于后代元素！当使用选择后代元素时div下的所有p都被选择，子元素只能是它的儿子
2.后代选择器
形如 div p(用一个空格隔开)选择的是指定标签下的所有对应的后代标签，儿子标签也属于后代标签的一个
举例：
div p{
color: red;
}
<p>1
  2
  3
  4
  5
  6
</p>
3.下一个兄弟选择器
形如#name+p 即选择的是当前标签的下一个同级标签(可进行多次叠加选择，但一般不使用多次叠加的方式选择)
举例
/*选中id为name的下一个p标签*/
#name+p{
color: red;
}
<p id="name">1
  2
  3
</p>
4.之后所有兄弟选择器
形如#name~p 即选择的是当前标签之后的所有同级标签
/*选择id为name的标签的之后所有同级p标签*/
#name~p{
background-color: red;
}
<p id="name">1
  2
  3
</p>
此文章为本人原创，仅限于本人的学习总结记录css选择器的层次关系 blog-CSS之选择器（基本选择器+层次选择器），若有错误之处请留言提出。
文章来源:https://blog.csdn.net/qq_39285144/article/details/97977188