在li标签内容前面插入图片的一种方法，以及一些基础的选择器

在li标签内容前面插入图片的一种方法：

选择器：

四个最基本的选择器：id选择器，class选择器，标签选择器，“*”通用选择器，其他的选择器都是基于这四个。

后代选择器：将两个选择器用空格隔开表示后代选择器，如：.left  img；子代选择器，将两个选择器用大于符号“>”连接，如：.left>a；

相邻选择器+：将两个选择器用+号连接，如a+p，这是表示找到与a标签相邻的p标签，相邻选择器只能找到与前一个选择器相邻的下一个选择器，不能找到之前的某一个选择器，具体一些就是说，“a+p”这个选择器只能找到与a标签相邻的下一个p标签，不能找到与a标签相邻的前一个p标签。兄弟选择器：将两个选择器用“~”连接，如“a~img”，找到a标签的兄弟元素img标签，兄弟选择器，顾名思义就是只有在两个元素是拥有同一个父元素时才能使用。

并且选择器：如div.wrapper ，表示找到class为wrapper的div；群组选择器：如上图中的a,p，将两个选择器用逗号隔开，在进行样式设置时，两个选择器的样式标签在页面中显示的样式都将是一样的。

属性选择器，如input[type='text']，表示找到type属性值为text的input标签；

伪类选择器：伪类选择器有很多，我举几个比较好用的

如，:first-child,:last-child,:nth-child()，这三个的用法可参考“https://blog.csdn.net/goulite/article/details/102504999”

还有经常用到的:hover选择器，这个选择器的用法是，当鼠标移入到元素的区域时，显示出之前网页加载出来的内容中没有显示的样式；

还有例如：not()，这个选择器表示不包括括号中的选择器的其他选择器，如span:not(.special)这个选择器就表示不包括class为special的其他span标签

   

以及：before和：after选择器，这两个选择器都可以搭配content使用，表示在元素的最前面和最后面添加内容，content的属性值可以是图片的url。这两个选择器也可以用作清除浮动的方式之一。