1.后代选择器

后代选择器是包含了后面的所有的标签如:

/*后代选择器 该选择器代表ul标签后面的全部li标签无关层级*/
ul li{
    background-color: rgb(8,84,5);
}

2.子选择器

子选择器表示后面一层的选择如;

/*子选择器 该选择器表示ul标签后面的p标签只有一层*/
ul > p{
	background-color: yellow;
}

3.相邻选择器

使用id选择器或者class选择器定位到标签下面的相邻标签如:

/*相邻选择器 相邻向下的一个标签*/
.Tang + b{
	background-color: red;
}

4.相邻选择器进阶版

与相邻选择器相同表示可以定位到class选择器或者id选择器标签下面的全部的相同标签,如:

/*全部选择选择器 表示在.Tang标签的下面所以b标签*/
.Tang~b{
	background-color: #111111;
}

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐