CSS选择器,这里分别以标签选择器、id选择器、class选择器、关联选择器,组合选择器、属性选择器

①标签选择器

示例代码:

前端知识点之CSS(二)_知识点

运行结果:

前端知识点之CSS(二)_net_02

②id选择器

id选择器以为#开头,而且选择器的ID不能重复,即每次调用一个选择器,而不能在一个html中多次调用一个

示例代码:

前端知识点之CSS(二)_标签_03

运行结果如下:

前端知识点之CSS(二)_标签_04


③class选择器(或类选择器)

以一个小点开头(.),命令为.c1、.c2、.net等

示例代码:

前端知识点之CSS(二)_net_05

输出的效果:

前端知识点之CSS(二)_标签_06

④关联标签,如果要对某个html页面里面的同样的标签设置一个共同的属性,可以使用关联标签

前端知识点之CSS(二)_标签_07

显示效果:

前端知识点之CSS(二)_知识点_08关关联标签可以在预设值的标签的外围标签上引用一个定义好的样式,然后通过指定哪些标签使用该样式来实现目标标签的样式设置,这里的外围标签为div,目标标签为li,预定义的样式为.container,li是要使用的样式,即.container下的所有li标签使用“background-color: red;”样式。

平时在使用的时候四种选择器用的最多的就是类选择器和关联选择器,所以对于标签选择器和id选择器用的相对较少,重点放在后面两种选择器上。


⑤组合选择器

前端知识点之CSS(二)_知识点_09

⑥属性选择器

  当一个html文件中同一个类型的标签有多重类型。比如如下多个input标签,但是只对text类型的input标签使用某种样式,则可以通过属性选择器来指定具体的类型标签

示例代码:

前端知识点之CSS(二)_标签_10


显示效果:

前端知识点之CSS(二)_标签_11