从零开始的html教程之CSS篇(2)：CSS中的选择器

作者：袖梨 2022-06-25

一、css的基本构成

选择器{属性：属性值}

css的语句就是由以上三部分组成选择器写在花括号前，花括号内为声明，如果有多个声明，属性前会用“；”隔开。先列举个例子：

body

{

background:#2CA4CF;

font-family:"黑体";

color:#ffffff;

}

我们之前学过元素内嵌入style改变样式的用法，style跟花括号内声明的用法相同。当外部样式表或内部样式表时，就要以这样的形式书写。这段代码的意思是body元素的背景为#2CA4CF色，字体为黑体，字体颜色为#ffffff（黑色）。

二、css中的选择器

1.标签选择器

p{color:black;}

标签选择器是给特定标签确定样式的选择器，这个例子就是让所有p标签应用了黑色字体的样式。

2.类选择器

.class1{color:black;}

类选择器就是根据类名(class)来选择的,在类名前加一个“.”。

3.ID选择器

#id1{color:black;}

ID 选择器可以为标有特定ID的元素指定特定的样式。id在一个html文档页面中只能出现一次，例如，你将一个元素的id取值为”id1”，那么在同一页面你就不能再将其他元素id取名为“id1”了。尽管你会发现即使命名好几个id，css选择器还是会把这些id全都应用样式，就像标签选择器那样。请保持良好的习惯，id不要出现重复。

4.后代选择器

div.class1 p{color:red;}

后代选择器又叫包含选择器。外层的标签在前面，内层的标签在后面，之间要留一个空格，内层标签为嵌套在外层内的标签，该内层标签就是外层标签的后代。该句子会将class为class1的div内所有p标签应用字体颜色红色的样式。

5.子代选择器

div.class1>p{color:red;}

子代选择器用法跟后代选择器很像，标签之间用“>”大于号连接。区别是子代选择器只会选择div.class1的子元素中的

，不包括子元素的子元素等，，不会选择孙子和更晚的备份，故名子代选择器。

6.群组选择器

p,div,.class1,#id1{color:red;}

群组选择器选择许多个标签，之间用“,”小写的逗号隔开，选择器会选择写下来的所有的标签或类。

7.通用选择器

*{color:red;}