css图片注释 |css3选择器非第一个子元素

在CSS中添加图片注释非常简单，只需要在需要注释的地方添加一个::before或者::after伪元素，并为这个伪元素添加一个content属性来显示大家想要的注释内容，接下来将图片作为背景显示即可。

/* 使用 ::before 伪元素添加图片注释 */
.box::before {
content: "";
background-image: url("path/to/image.png");
background-repeat: no-repeat;
background-position: center;
display: block;
width: 20px;
height: 20px;
margin-right: 10px;
float: left;
}

通过上面的代码，大家可以在CSS中使用 ::before 伪元素添加图片注释，并通过content属性设置注释内容，后面的属性则是定义了图片的样式和布局。

大家也可以使用 ::after 伪元素来实现图片注释，代码如下：

/* 使用 ::after 伪元素添加图片注释 */
.box::after {
content: "";
background-image: url("path/to/image.png");
background-repeat: no-repeat;
background-position: center;
display: inline-block;
width: 20px;
height: 20px;
margin-left: 10px;
vertical-align: middle;
}

上面的代码中使用了 ::after 伪元素，并通过content属性设置注释内容，后面的属性则是定义了图片的样式和布局，注意这里使用了display: inline-block和vertical-align: middle属性来让图片与文字在同一行显示。

总之，通过图片注释，大家可以更加方便地阅读和管理CSS代码，同时也可以为大家的网站或应用界面增加一些视觉效果，提升用户体验。