[title]CSS选择器的作用[/title]
选择器(选择符)就是根据不同需求吧不同的标签选出来就是选择器的作用。简单说就是选择标签用的。
选择器分为基础选择器和复合选择器两大类
- 基础选择器是由单个选择器组成
- 基础选择器包括:标签选择器,类选择器,id选择器和通配符选择器
标签选择器(元素选择器)是指用HTML标签名作为选择器,按标签名分类,为页面中某一类标签指定统一的CSS样式
可用于筛选某一类标签,能快速为页面中同类型标签统一设置样式
缺点是不能差异化样式,只能全选标签
类选择器:如果要差异化不同标签,单独选一个或者某几个标签,可以使用类选择器
类选择器口诀:样式点定义 结构类调用 一个或多个 开发最常用
语法:
[info]
.类名 {
属性1: 属性值1;
}
[/info]
注意!类选择器使用"."(英文点号)进行标识,后面紧跟类名(自定义,我们自己命名的)。
可理解为给这个标签起了个名字
长名称或词组可以使用中横线为选择器命名
别用纯数字,中文等命名,尽量用英文字母标示
命名要有含义,尽量让人一眼知道这个类名的目的
给一个标签指定多个类名,从而达到多选择目的,简单说就是一个标签有多个名字
多类名使用方式
[info]<div class="xxx xxx"></div>[/info]- 在标签css属性中写多个类名
- 多个类名中间必须用空格分开
- 此标签可以分别具有这些类名的样式
多类名使用场景
- 可以吧一些标签元素相同样式(共同部分)写在一个类里面
- 这些标签都可以调用这个公共的类,然后在调用自己独有的类
- 节省css代码,统一修改方便
各类名中间要用空格隔开
id选择器可以为有特定id的HTML元素指定特定的样式
HTML元素以id属性来设置id选择器,css中id选择器以“#”来定义
语法:
[info]
#id名 {
属性1: 属性值1;
}
[/info]
注意!id属性只能在每个HTML文档中出现一次
口诀:样式#定义,结构id调用,只能调用一次,别人切勿使用
id选择器和类选择器的区别:
- 类选择器class好比人名,一个人可以有多个名字,同时一个名字也可以被多个人使用
- id比作人的身份号码,是唯一的,不可重复
- id选择器和类选择器最大区别在于使用次数上
- 类选择器在修改样式中使用最多,id选择器一般用于页面唯一性的元素上,经常和JavaScript搭配使用
在CSS中,通配符选择器使用“*”定义,表示选取页面中所有元素(标签)
语法:
[info]
*{
属性1: 属性值1;
}
[/info]
通配符选择器不需要调用,自动给所有的元素使用样式
特殊情况才使用
[title]总结[/title]
基础选择器有四种:
- 标签选择器:可以选择所有的相同标签,特点不能差异化选择,使用场景比较多,用法:p {xxx: xxx;}
- 类选择器:可以选出一个或多个标签,特点可以根据需求选择,使用场景非常多,用法:.nav {xxx: xxx;}
- id选择器:一次只能选一个标签,特点ID属性只能在每个HTML文档中出现一次,使用场景一般和js搭配,用法:#nav {xxx: xxx;}
- 通配符选择器:选择所有的标签,特点选择的太多,有部分不需要,使用场景特殊情况使用,用法* {xxx: xxx;}
如果只是修改样式,类选择器是使用最多的
文章评论