CSS入门教程-06-id选择器标签选择器和类选择器【动力节点】原创

那么接下来我们来看一看什么呢？看一看这个这个这个这个这个标签选择器，标签选择器啊，Div div div div div div，然后我这直接写一个div大括号，这种选择器我们叫做标签选择器。语法格式是什么呀？标签名大括号。样式名样式直样式名样式直。注意，标签选择器作用的范围比ID选择器广。ID选择器，你这个样式只能作用于你这个页面当中一个元素。因为ID不能重。

对吧，但是标签选择题就是您这个网页当中，但凡是这个标签都用这个样子，但凡是这个标签都用这个样子，明白background。Black。黑色。边框一像素红色solid红色行吧，这是。宽度设置一下行吗？都弄成100得了，高度。行那。刷一下呗。Div，独占行。是吧，这是个div，这是个div，这是div。

是不是作用于？这个网页当中所有的div标签选择器，那还这个标签选择器它的诶它的范围要比这个广一些啊各位我再说一下这个呢，就是就就就是一个啊，这是这可以是多个，但是这个可不可以也是一个。可以吧，可以啊，你这个网页当中只有这一个标签，不就一个吗？有的老师那万一两个咋整，那没办法，你要是两个三个，我告诉你这样式你就直接作用上去了。其实也不灵活对吧，不太灵活，为啥，因为。因为你这个网页当中这种标记如果特别特别的多，我就想前三个。用这个样式后几个我还不想用这个样式，有没有这种情况也有吧，那你这种情况你该咋办呀，你有另外一招啊，叫类选择题。

来。类选择器，这个选择器啊，这个语法格式呢，也是非常的简单啊，点后边跟什么类名，记住记住啊。点类名。井号后边你就不用多想了，一定是ID，前边啥都没有的，你就记住了它是啥标签有点开始的，后面这个一定是个类名大括号。一样。比如说我们有一个。Div。

还有一个别写这个，别写这个了啊，我们用一下谁呢。Input吧，行吧，好，我们再写一个啊。嗯。写个吧。这是个下拉列表吧，Option呗。是不是啊，这里面我写上吧，啊，比如说专科。本科简单点啊，我大概什么样，看看啊刷新一下。这个和这个呗。咱换个行啊，这边也换个行。

打开再刷新一下。是吧，我现在我想设置他们的边框，能设置吗。我们尝试一下啊，尝试一下。想设置这个input和这个select的边框。边框都是红色边框一像素。实现行吧，那我要怎么做呀。可以有多种方式，可以他加上ID，可以给他加ID吧，但加ID的话是不是就相当于得写两次啊。是不是好？你写标签尴尬，为啥这俩标签名怎么着不一样？看见了吧，你还没法写标签，你写标签也只能作用于这一个标签，或者说作用于这个标签吧，我告诉你一招，你可以给他起个类名，还类加载器，别整这个啊，没有类加载器这一说啊。

就class啊，这边我们写上去就叫my class行吧，好，接下来把这个呢拿过来放到下边这个地方，也有一个my class，你只要让它的类名一样就行了，这个类名是my class，这个类名也是my class，行了，你这个位置就可以写什么点my class打括号，这样的意思是什么意思呢？就表示说你这个页面当中，但凡是你的class是什么，是这个名字的，都可以使用同一个样式，这种方式的优点是什么？跨标签。跨标签什么意思？你这个就只能作用于这一类标签，你这个就只能作用这个ID，你这个是不是就可以，就是各种标签都可以，只要你的类名一样，是不是就可以了，只不过这个之前我没给大家讲，在HTML当中元素都有一个什么属性，Class属性，用来给这个元素起类名。

如果这个类名和这个类名相等，我们就认为这个标签和这个边是属于同一类，懂了吗？都属于学生类，懂不懂，懂不懂。都属于同一类class，相同的标签可以认为是同一类标签。好，那这块呢，咱们看看这个边框，如果是这样行不行呢。打开我们刷新一下。行吧，边框啊。对不对。变色，这是那个什么，这是一个浏览器自带的，浏览器自带的样式啊。

好了，诶，那你说这个宽度和高度能设置吗。有的可能不起作用，各位啊，你别高兴太早啊，对，宽度假如400像素吧，我看看啊。宽度400像素。是吧，然后呢，高度。200，哎，200没必要吧，100像素吧，我看看是啥样。30就够了吧。是吧，30就够了，这个有点。你看这个边框。不是那么简单的，这里面有个什么？赶紧。

这小相机一样对吧。你看你光标进去的时候它是一种颜色，离开是一种颜色吧。哎。我们研究一下啊，看看他怎么写的这个。他怎么用的是。哦，SPA里边套了一个什么图层里边套了一个input。外边就是span，你看。是吧？这个里边有span，也有input。然后呢，你也可以看看这个右边这右边这这是个什么。你那是按钮吗？是按钮吗？哦，是submit是吧，百度一下，只不过他用了样式吧，你看用了类class或者叫这个吧，这个应该它是对应一个样子吧，就是他肯定是在他的这个这个这个程序里边有这个有这个东西对吧？啊肯定是有这东西的，而且你有没有看到人家这个类名起的是什么。

起的两个类名儿。中间有个空格隔开，这是第一个类名，第二个类名。对吧，两个类名应该是两套样式，用在这一个input标签上是不是，嗯。好，那这个各位啊，咱们三个选择器能记住吗。景的是啥，啥也没有的是啥，标签带点的是类类，记住啊记住。