在开发过程中我们经常需要对设置对应的标签的各种css外观，但是首先我们需要找到对应的标签，此时我们需要使用对应的选择器来精确查找到对应的标签元素，在开发过程中我们经常使用的选择器主要有id选择器，class选择器，标签名选择器，群组选择器，后代选择器，子代选择器，通配选择器。下面我们就来看一下各种选择器的作用和使用
html中body部分代码：
未来实现的效果：
想要实现上面的效果需要通过对应的css样式修改对应的li标签的外观，具体需改如下：
通配选择器（*），*在这里指代所有的标签，经常使用该选择器执行初始化操作，事例代码：
/*初始化操作*/
* {
margin: 0;
padding: 0;
}
注意事项：通配选择器的优先级最低。
标签名选择器（通过对应的标签的名字进行选择），事例代码：
div {
/*设置标签宽度*/
width: 1000px;
}
后代选择器（通过标签的后代层层进行选择，最终确定需要选择的标签），事例代码：
div ul li {
/*设置li标签的宽高和边框拐角，将其转换成圆形*/
width: 100px;
height: 100px;
border-radius: 50px;
/*文字居中*/
text-align: center;
line-height: 100px;
background-color: red;
/*将所有的li在一行显示*/
display: inline-block;
}
当然了我们还可以通过子代选择器执行li外观的设置，子代指的是对应标签的直接子代具体代码如下：
/*
>:在这里代表直接子类，下面可以理解为div标签的直接子类ul的直接子类li;
*/
div>ul>li {
/*设置li标签的宽高和边框拐角，将其转换成圆形*/
width: 100px;
height: 100px;
border-radius: 50px;
/*文字居中*/
text-align: center;
line-height: 100px;
background-color: red;
/*将所有的li在一行显示*/
display: inline-block;
}
好了到此我们就能实现上面图片中的效果了，是不是很棒啊？呵呵有点自恋，下面我们来看一下其他选择器完成对其外观的设置
class选择器（class作为标签的一个属性，用来将相同类型的标签归类处理），通过对应的class名选择对应名字的选择器，可以实现同时选择多个标签的作用，因为可以同时存在多个相同class名的标签－事例代码
/*修改class名为list的li标签*/
.list {
background-color: yellow;
}
效果如图：
我们看上面的body代码不难发现前两个li标签的class 都是list因此会修改前两个li标签背景颜色。
注意：class允许有多个class名字，即可以写成如下格式：
此时的li相当于有两个名字，first和list均代表第一个li标签，因此此时我们的访问方式有以下三种（都代表访问的是第一个li标签）：
多类名可以解决相似类别的标签之前的区别。
id选择器（有些时候对于某些标签类别相同，但是我们需要唯一区分此时可以使用id选择器）id其实本质上和我们的身份证好一样，我们知道每一个人的身份证号码是唯一的，因此标签的id属性值也具有唯一性，即同一个html中每一个标签的id值都是唯一的，不允许出现相同id值的标签（w3c标准），具体如下：
body代码：
此时如果通过class修改标签li。我们发现有两个标签的class是一样的，因此前两个li外观一致，但是如果我们想要设置前两个li一个背景黄色，一个为黑色如何处理呢？此时我们发现两个标签都有一个唯一的id值，我们可以通过id选择器来选择对应的标签：
/*id选择器选择对应的li*/
#first {
background-color: yellow;
}
#second {
background-color: black;
}
效果如下：
注意：id具有唯一性，因此在同一个html中同一个id值只能有一个，当然了在不同的html中允许出现相同的id值。
网友评论