首页>>网站建设>>Javascript>>经验笔记

在CSS中，如果想要渲染HTML网页元素样式，需要先选择元素才能进行下一步的渲染。

在CSS中选择器有三种，分别是标签选择器、id选择器、class选择器。

一、标签选择器

顾名思义就是使用标签名来选择元素，语法如下：



标签选择器使用的是标签的名字，上面就是一个标签选择器的例子。但是使用时需要注意的是，标签选择器会把所有相同标签都选择，也就是说页面中只要有p标签，都会被上述CSS代码影响样式。

二、id选择器

在HTML文档中，每个标签都可以定义id这个属性，使用CSS选择的时候，只要在定义的id名称前加一个丼号（“#”）即可；实例如下：

<p id="p1">这里是css定义页面背景颜色</p>
<style>
#p1{
	background-color:red;
}
</style>

其中p标签的id为p1，使用id选择的时候加上丼号即可。PS：切记不能使用数字开头定义id。

三、class选择器

同id选择器差不多，不过使用的是class属性，但是选择的时候前缀也不一样，使用class名称选择的时候需要在前面加上点（“.”）而不是丼号。

<p class="p1">这里是css定义页面背景颜色</p>
<style>
.p1{
	background-color:red;
}
</style>

PS:同上，不能使用数字开头定义

四、多级使用

在CSS的选择器中，如果一个名称不能达到你选择的目的，你可以使用多重来选择，比如说：

<p id="p1">这里是css定义页面背景颜色</p>
<style>
p #p1{
	background-color:red;
}
</style>

上面的选择器就是P标签下面的id为p1的标签，而不是其他（比如说div）下面的id为p1的标签。

五、代码复用

在CSS的定义中，如果想要定义两个样式选择器名称，但是样式是一样的，可以在定义的时候把选择器名称用逗号（“，”）隔开即可,如下：

p，#p1{
	background-color:red;
}

不要重复定义。在往后的学习中，我们可以把不同选择器里面相同的内容整理出来这样定义，不仅省了很多代码量，也方便样式管理。

学习不止眼前的教程与笔记还需实践与创新——小伙伴们块动手试试吧~