CSS笔记-CSS基础选择器

CSS选择器的作用

选择器(选择符)就是根据不同需求吧不同的标签选出来就是选择器的作用。简单说就是选择标签用的。

选择器分类

选择器分为基础选择器和复合选择器两大类

  • 基础选择器是由单个选择器组成
  • 基础选择器包括:标签选择器类选择器id选择器通配符选择器

        标签选择器(元素选择器)是指用HTML标签名作为选择器,按标签名分类,为页面中某一类标签指定统一的CSS样式

可用于筛选某一类标签,能快速为页面中同类型标签统一设置样式

缺点是不能差异化样式,只能全选标签

        类选择器:如果要差异化不同标签,单独选一个或者某几个标签,可以使用类选择器

类选择器口诀:样式点定义  结构类调用  一个或多个  开发最常用

语法:

.类名 {

属性1: 属性值1;

注意!类选择器使用"."(英文点号)进行标识,后面紧跟类名(自定义,我们自己命名的)。

可理解为给这个标签起了个名字

长名称或词组可以使用中横线为选择器命名

别用纯数字,中文等命名,尽量用英文字母标示

命名要有含义,尽量让人一眼知道这个类名的目的

类选择器-多类名

给一个标签指定多个类名,从而达到多选择目的,简单说就是一个标签有多个名字

多类名使用方式

<div class="xxx  xxx"></div>
  1. 在标签css属性中写多个类名
  2. 多个类名中间必须用空格分开
  3. 此标签可以分别具有这些类名的样式

多类名使用场景

  1. 可以吧一些标签元素相同样式(共同部分)写在一个类里面
  2. 这些标签都可以调用这个公共的类,然后在调用自己独有的类
  3. 节省css代码,统一修改方便

各类名中间要用空格隔开

ID选择器

id选择器可以为有特定id的HTML元素指定特定的样式

HTML元素以id属性来设置id选择器,css中id选择器以“#”来定义

语法:

#id名 {

属性1: 属性值1;

}

注意!id属性只能在每个HTML文档中出现一次

口诀:样式#定义,结构id调用,只能调用一次,别人切勿使用

id选择器和类选择器的区别:

  1. 类选择器class好比人名,一个人可以有多个名字,同时一个名字也可以被多个人使用
  2. id比作人的身份号码,是唯一的,不可重复
  3. id选择器和类选择器最大区别在于使用次数上
  4. 类选择器在修改样式中使用最多,id选择器一般用于页面唯一性的元素上,经常和JavaScript搭配使用

通配符选择器

在CSS中,通配符选择器使用“*”定义,表示选取页面中所有元素(标签)

语法:

*{

属性1: 属性值1;

通配符选择器不需要调用,自动给所有的元素使用样式

特殊情况才使用

总结

基础选择器有四种:

  1. 标签选择器:可以选择所有的相同标签,特点不能差异化选择,使用场景比较多,用法:p {xxx: xxx;}
  2. 类选择器:可以选出一个或多个标签,特点可以根据需求选择,使用场景非常多,用法:.nav {xxx: xxx;}
  3. id选择器:一次只能选一个标签,特点ID属性只能在每个HTML文档中出现一次,使用场景一般和js搭配,用法:#nav {xxx: xxx;}
  4. 通配符选择器:选择所有的标签,特点选择的太多,有部分不需要,使用场景特殊情况使用,用法* {xxx: xxx;}

如果只是修改样式,类选择器是使用最多的

点赞

发表评论