在开发过程中我们经常需要对设置对应的标签的各种css外观，但是首先我们需要找到对应的标签，此时我们需要使用对应的选择器来精确查找到对应的标签元素，在开发过程中我们经常使用的选择器主要有id选择器，class选择器，标签名选择器，群组选择器，后代选择器，子代选择器，通配选择器。下面我们就来看一下各种选择器的作用和使用
html中body部分代码：
<body><div><ul><li class="list">1</li><li class="list">2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul></div></body>未来实现的效果：
想要实现上面的效果需要通过对应的css样式修改对应的li标签的外观，具体需改如下：
通配选择器(*)，*在这里指代所有的标签，经常使用该选择器执行初始化操作，事例代码：
* {margin: 0;padding: 0;}注意事项：通配选择器的优先级**。
标签名选择器(通过对应的标签的名字进行选择)，事例代码：
div {width: 1000px;}后代选择器(通过标签的后代层层进行选择，**终确定需要选择的标签)，事例代码：
div ul li {width: 100px;height: 100px;border-radius: 50px;text-align: center;line-height: 100px;background-color: red;display: inline-block;}当然了我们还可以通过子代选择器执行li外观的设置，子代指的是对应标签的直接子代具体代码如下：
div>ul>li {width: 100px;height: 100px;border-radius: 50px;text-align: center;line-height: 100px;background-color: red;display: inline-block;}好了到此我们就能实现上面图片中的效果了，是不是很棒啊?呵呵有点自恋，下面我们来看一下其他选择器完成对其外观的设置
class选择器(class作为标签的一个属性，用来将相同类型的标签归类处理)，通过对应的class名选择对应名字的选择器，可以实现同时选择多个标签的作用，因为可以同时存在多个相同class名的标签-事例代码
.list {background-color: yellow;}效果如图：
我们看上面的body代码不难发现前两个li标签的class 都是list因此会修改前两个li标签背景颜色。
注意：class允许有多个class名字，即可以写成如下格式：
此时的li相当于有两个名字，first和list均代表**个li标签，因此此时我们的访问方式有以下三种(都代表访问的是**个li标签)：
.first{background-color:red;}.list1{background-color:black;}.first.list1{background-color:yellow;}多类名可以解决相似类别的标签之前的区别。
id选择器(有些时候对于某些标签类别相同，但是我们需要**区分此时可以使用id选择器)id其实本质上和我们的身份证好一样，我们知道每一个人的身份证号码是**的，因此标签的id属性值也具有**性，即同一个html中每一个标签的id值都是**的，不允许出现相同id值的标签(w3c标准)，具体如下：
body代码：
<body><div><ul><li class="list" id="first">1</li><li class="list" id="second">2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul></div></body>此时如果通过class修改标签li。我们发现有两个标签的class是一样的，因此前两个li外观一致，但是如果我们想要设置前两个li一个背景黄色，一个为黑色如何处理呢?此时我们发现两个标签都有一个**的id值，我们可以通过id选择器来选择对应的标签：
#first {background-color: yellow;}#second {background-color: black;}效果如下：
注意：id具有**性，因此在同一个html中同一个id值只能有一个，当然了在不同的html中允许出现相同的id值。
QQ：2290909800 QQ交流群：493076664;97682894；咨询电话(Phone)：0371-55397597 15838221845(手机)
地址（Address）： 郑州市高新区莲花街牡丹路教育科技产业园区B座 网址（website）：http://hn.lanou3g.com/