在CSS中,如果想要渲染HTML网页元素样式,需要先选择元素才能进行下一步的渲染。
在CSS中选择器有三种,分别是标签选择器、id选择器、class选择器。
顾名思义就是使用标签名来选择元素,语法如下:
标签选择器使用的是标签的名字,上面就是一个标签选择器的例子。但是使用时需要注意的是,标签选择器会把所有相同标签都选择,也就是说页面中只要有p标签,都会被上述CSS代码影响样式。
在HTML文档中,每个标签都可以定义id这个属性,使用CSS选择的时候,只要在定义的id名称前加一个丼号(“#”)即可;实例如下:
<p id="p1">这里是css定义页面背景颜色</p> <style> #p1{ background-color:red; } </style>
其中p标签的id为p1,使用id选择的时候加上丼号即可。PS:切记不能使用数字开头定义id。
同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; }不要重复定义。在往后的学习中,我们可以把不同选择器里面相同的内容整理出来这样定义,不仅省了很多代码量,也方便样式管理。
学习不止眼前的教程与笔记还需实践与创新——小伙伴们块动手试试吧~
jQuery2021-01-08
jQuery2021-01-07
MySQL2020-12-13
电脑2020-12-12
服务器2020-12-06
电脑2020-10-06