css新的选择器

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

以前的css选择器使用起来代码过于繁琐，难于对元素进行精确定位。下面介绍几个新的css选择器，其中有目标选择器，结构性伪类选择器，CSS变量等。

---

一、目标选择器

1.代码

代码如下（示例）：

        /* 子代选择器 */
		div>p{
			color: skyblue;
		}
		/*兄弟选择器*/
		/*针对的是向下寻找紧挨着的元素*/
		div+p{
			color: skyblue;
		}
		/*同级选择器*/
		/*针对的是向下寻找元素*/
		div~p{
			color: skyblue;
		}
		/* 属性选择器 */
		[id="p"] {
			color: skyblue;
		}

二、结构性伪类选择器

1.代码

代码如下（示例）：

ul li:nth-child(2) {
			background-color: tomato;
		}
		ul li:nth-of-type(2) {
			/*推荐使用*/
			background-color: pink;
		}
		ul li:first-child {
			background-color: cyan;
		}
		ul li:last-child{
			background-color: skyblue;
		}

三、CSS变量

1.代码

代码如下（示例）：

        :root {
			--color: #98ac6e;
			--width: 100px;
		}
		div {
			width: calc(var(--width) + 100px);
			background-color: var(--color);
		}

2.特点

1.可以简化代码，增强代码的可读性。
2.严格区分大小写。
3.可以为属性进行命名

---

总结

通过新的选择器可以更加高效，简单的对css进行编辑
使用新选择器可以大幅度提升代码的可读性，简化代码