2.1css选择器的作用(类选择器)

<div>我是div</div>
<div>我是第二个div</div>

<ul>
  <li>我是ul里的li</li>
</ul>

<ol>
  <li>我是ol里的Li</li>
</ol>
  1. 如何把div里面的文字改为红色?
  2. 如何把第二个div里面的文字改为红色?
  3. 我想把ul里的li文字改成红色?

2.2选择器分类

选择器分为基础选择器复合选择器两个大类,我们这里先讲解一下基础选择器。

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

2.3标签选择器

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

语法

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

作用

标签选择器可以把某一类标签全部选择出来,比如所有的<div>和所有的<span>标签

优点

能快速为页面中同类型的标签统一设置样式

缺点

不能设计差异化样式,只能选择全部的当前标签。

2.4类选择器

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

语法

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

结构需要用class属性来调用class类

例如,将所有拥有red类的HTML元素均为红色

<head>
  <style>
.red {  /* red这个类名是我们自定义的有意义的名字 */
  color: red;
}
</style>
</head>

<body>
  <div class="red">红色</div>
</body>

口诀:样式点定义,结构类(class)调用,一个或多个,开发最常用。

注意:

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

②可以理解为给这个标签起了一个名字来表示,与选择器名一样

③长名称或词组可以使用-来分割为选择器命名 例如.star-sing{}

④命名要有意义,尽量使用别人一烟就知道这个类名的目的。

最后修改:2022 年 03 月 21 日
如果觉得我的文章对你有用,请随意赞赏