2.基础选择器

选择器分为基础选择器与复合选择器，我们现在先说基础选择器，基础选择器包括:标签选择器，类选择器，id选择器和通配符选择器

像我们上一章提到的 p 就是基础选择器中的标签选择器，基础选择器除p之外还有这些 CSS 选择器参考手册

目录

1  标签选择器

2  类选择器

3  id选择器

4  通配符选择器

5  属性选择器

---

1  标签选择器

以html标签名称作为选择器，像上一章的p，我们再做几个例子

我们创建一个div和一个ul，然后让div内容为蓝色，li内容为红色

如果有多个div或li元素也会同样生效

2  类选择器

标签选择器只能将html文件中所有的标签都搞成一个样式，如果我们想让div中存在两种样式，我们可以使用类选择器，我们做一下

我们现在让第二个div变成绿色

• 类选择器中前面的点不要忘加

类选择器的优先级比标签选择器的优先级高，我们改变css的顺序后，它的效果还是一样

一个类可以使用在不同的标签上，我们现在设置第一个li的类为the_second_div

• 最好不要将p,div这种标签名定义为类名

一个标签可以给多个类名

• 两个类名中间存在一个空格

两个类选择器如果重复对一个属性进行修改，网页使用后修改的属性

3  id选择器

id选择器是这样用的

id选择器一般只匹配一个控件，如果多的话会有提示

但依然可以正常使用

id选择器多用于唯一的元素，常与js配合使用

4  通配符选择器

通配符用于选中页面中所有标签，它是这样用的

现在这个页面就变成这样了

一般应用于清除内外边距，后面会提到

5  属性选择器

属性选择器用中括号表示

我们现在有两个文本框元素，一个有value，一个没value

我们现在只想改变有value的样式，我们可以这样写

发现它现在只对有value属性的文本框生效

它还可以这样使用，E代表我们元素的标签，att代表属性名称，val代表属性值

第二个是最常用的，我们做个例子，现在我将第二个文本框的type改成password

然后css这样写

 这样我们第二个文本框的文字颜色就会变为红色，而且它不会影响第一个文本框的样式

类也算属性之一，比如我现在有这样几个div

我现在想对1,2,3,4设置样式，5不设置样式，我们可以这样写

这样前四个就有样式，最后一个没有

属性选择器前面也可以不接标签选择器

效果是一样的