CSS的基本语法由选择器、属性和属性的值构成,如:
p{
font-size:12px;
color: red;
align: center;
}
属性及其值比较简单,相信在之前讲过的HTML中你也知道一些,那选择器是什么?它包含哪些种类?这些问题是这篇文章需要探讨的。
CSS选择器
在CSS中,选择器就是用于选择需要添加样式的对象的一种匹配模式。内联式选择器不需要选择器,内部式和外链式则需要选择器。CSS有四大类选择器,包括基本选择器、复合选择器、属性选择器和伪类选择器,今天先讲前两种。
基本选择器
基本选择器中又包括类选择器、ID选择器、标签(元素)选择器和通用选择器。
1.类选择器
特点:可灵活应用于一类元素中的个别几个,可重复使用;
定义方法:.类的名称
调用方法:class="类的名称"
例如,用类选择器将第1段文字变成红色,将第3段段落字体改为Times New Roman:
结果如图所示:
类选择器可以分组,将多个选择器的共性统一起来。
格式:.a1,.a2,.a3
例如,将 p 标签中的内容设置成字体和字号一致但颜色不同的段落文本:
结果如图所示:
2.ID选择器
特点:类似于类选择器,但只可应用于一类元素中的一个,必须唯一,且不可以有空格,故不能结合其他选择器使用;
定义方法:#ID名称
调用方法:id="ID名称"
例如,把上面例子转换成id选择器:
3.标签选择器
特点:用于一类元素,可以实现统一修改元素格式;
定义方法:标签名称
调用方法:无需调用
例如,把上面的例子上加上让段落的字号全部为20px的标签选择器:
结果是所有p标签中的元素字体都变大了:
4.通用选择器
特点:选择HTML页面上所有元素,可以被类选择器、ID选择器和标签选择器覆盖。
定义方法:*
调用方法:无需调用
例如,将上面例子的第二和第三行段落变成蓝色(第一行的段落被类选择器覆盖):
结果如图:
实际中,一般不会使用该选择器,因为它会对页面上的所有元素的样式进行渲染,使速度变慢。
复合选择器
1.后代选择器
后代选择器又称包含选择器。
格式:a1 a2
特点:可以隔代作用,也就是说作用的标签不一定是相邻的,可能 a2 还包含在其他标签中。
例如,将 ul 标签中的 em 标签中的字体颜色变为红色:
结果如图。看!无论中间隔了多少层标签,后代选择器还是能达到那个地方。
2.父子选择器
父子选择器与后代选择器不同,它只会选择某个元素中特定的标签。
格式:a1>a2
特点:不能隔代作用,即作用的标签一定是相邻的。
例如,将 div 标签中的 p 标签中的字体颜色变为蓝色:
结果如下。除了和
相邻的
,其他位置的段落都不会改变。
3.相邻选择器
相邻选择器是指选择有相同的父标签且相邻的标签。
格式:a1 a2
特点:仅作用于下一个标签。
例如,将 h3 标签下的 p 标签中的字体变为粗体:
4.兄弟选择器
相邻选择器是指选择有相同的父标签且相邻的标签。
格式:a1~a2
特点:作用于一个标签下的所有指定标签。
例如,将上述 h3 标签下的 p 标签中的字体颜色全变为蓝色:
结语
基本选择包括类选择器、id选择器、标签选择器和通用选择器。复合选择器有后代选择器、父子选择器、相邻选择器和兄弟选择器。这两类选择器是非常常用的选择器,一定要掌握。
领取专属 10元无门槛券
私享最新 技术干货