CSS学习笔记——选择器

253 阅读2分钟

css代码风格

样式大小写
h3{

color:颜色属性;

}

  1. 属性值前,冒号后面,保留一个空格
  2. 选择器(标签)和大括号中间保留空格

css选择器

  1. 作用:选择器(选择符)就是根据不同需求把不同的标签选出来的作用
  2. 分类:选择器分为基础选择器和复合选择器
  • 基础选择器是由单个选择器组成
  • 基础选择器又包括:标签选择器,id选择器和通配符选择器

标签选择器

标签选择器是用HTML标签名称最为选择器,按标签名称分类,为页面某一类标签指定同一css样式。
语法如下

标签名{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}

标签选择器可以把某一类标签全部选择出来,如所以的<div><span>标签, 优点在于快速为页面同类型同一设置样式。 缺点在于不能给其中一个修改样式,只能选择全部的当前标签。

类选择器

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

类名{
属性1:属性值1;
...
}

如:

.yyds{
color:red;
}
结构需要用class属性来调用class类的意思

<li class="red">五条</li>

注意

  • 类选择器使用“.”进行标识,后面紧跟类名(自定义)
  • 长名称或词组可以使用中横线为选择器命名。
  • 不要使用纯数字,中午等命名。

类选择器-多类名

可给一个标签指定多个类名,从而达到更多选择的目的

<div class="类名1 类名2">名称</div>
<div class="red font20">名称</div>
  • 在标签class属性中写多个类名
  • 多个类名中间必须用空格隔开
  1. 可以把一些标签元素同样的样放到一个类里。
  2. 这些标签都可以调用这个公共的类,然后调用自己独有的类,从而节省css代码,统一修改也方便。

id选择器()

  • id选择器可以为标有特定id的html元素指定特定的样式。
  • html元素以id属性来设置id选择器,css中id选择器以“#”来定义。 语法

只能调用一次,别人切勿使用

#id{
属性1:属性值1;
}

例如:

#pink{
color: pink;

}

通配符选择器

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

语法

*{
属性1:属性值1;
...
}

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