2.1css选择器的作用(类选择器)
<div>我是div</div>
<div>我是第二个div</div>
<ul>
<li>我是ul里的li</li>
</ul>
<ol>
<li>我是ol里的Li</li>
</ol>
- 如何把div里面的文字改为红色?
- 如何把第二个div里面的文字改为红色?
- 我想把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{}
④命名要有意义,尽量使用别人一烟就知道这个类名的目的。