类选择器

符号是.开头 然后类的名字

样式类名不要用数字开头（有的浏览器不认）。

所谓类就是class，.class与id非常相似，任何标签都可以加类，但是类可以重复

通过样式类选择元素：

示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

    <style type="text/css">

        .c1{

            color: red;

            font-size: 12px;

        }

    </style>

</head>

<body>

    <div>

        <h3 class="c1">我是h3标签</h3>

    </div>

</body>

</html>

class是归类的概念

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

    <style type="text/css">

        .c1{

            color: red;

            font-size: 12px;

        }

    </style>

</head>

<body>

    <div>

        <h3 class="c1">我是h3标签</h3>

        <h3 class="c1">我是h3标签</h3>

    </div>

</body>

</html>

同一个标签可以携带多个类，用空格隔开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

    <style type="text/css">

        .c1{

            color: red;

            font-size: 12px;

        }

        .c2{

            color: #6495ED;

        }

    </style>

</head>

<body>

    <div>

        <h3 class="c1 c2">我是h3标签</h3>

        <h3 class="c1">我是h3标签</h3>

    </div>

</body>

</html>

应用了c1 c2 css样式 ， c2的css样式的颜色覆盖掉c1颜色样式，css是层叠样式表

把c2颜色样式勾掉，c1样式颜色马上应用

到底使用id还是用class？

尽可能的用class。除非一些特殊情况可以用id，一般页面使用class，页面尽量少用id
id一般是用在js的。也就是说 js是通过id来获取到标签

一定要有"公共类"的概念
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

    <style type="text/css">

        .lv1{

            color: green;

        }

        .lv2{

            text-decoration: underline;

        }

        .lv3{

            font-size: 40px;

        }

    </style>

</head>

<body>

    <!-- 公共类 公有的属性 -->

    <div>

        <p class="lv1 lv3">段落1</p>

        <p class="lv2 lv1">段落2</p>

        <p class="lv2 lv3">段落3</p>

    </div>

</body>

</html

总结：
1.不要试图用一个类将我们的页面写完。这个标签要携带多个类，共同设置样式。
2.每个类要尽可能的小，有公共的概念，能够让更多的标签使用。
 

前端 CSS的选择器 基本选择器 类选择器的更多相关文章

  1. CSS3每日一练之选择器-结构性伪类选择器

    <!DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <title> ...

  2. CSS3 选择器——笔记+实战案例(基本选择器、组合选择器、属性选择器、伪类选择器)

    使用CSS3 选择器——笔记 CSS通过选择器控制HTML元素,CSS选择器对网页对象可以实现一对一.一对多或者多对一的匹配. 一.CSS3选择器分类 CSS选择器在CSS2.1选择器的基础上新增了属 ...

  3. HTML[2种特殊选择器]_伪类选择器&属性选择器

    本文介绍两种特殊的选择器 1.伪类选择器 2.属性选择器 1.伪类选择器 ...: nth-of -type (x) x为同类型兄弟元素中的排名 例如: <body> <ul> ...

  4. css3类选择器之结合元素选择器和多类选择器

    css3类选择器之结合元素选择器和多类选择器用法: <!DOCTYPE html> <html lang="en"> <head> <me ...

  5. CSS基础--属性选择器、伪类选择器

    属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  6. HTML+CSS教程（四）选择器（id选择器，类选择器，标签选择器，子代选择器，后代选择器，组选择器，伪类选择器）/css引入页面的形式（行内样式、内嵌样式、外联样式）

    一.回顾内容 前端的三大组成(三大模块)    HTMl(超文本标记语言) 结构层    css(层叠样式表) 表现层:用来美化HTML结构    JS(Java script)(脚本语言) 行为层: ...

  7. CSS之后代选择器与多类选择器

    <新人报到,欢迎拍砖#- -> 一.后代选择器 说起CSS的后代选择器.它属于派生选择器中的一种,两者附属关系如下: -->派生选择器 ----CSS 后代选择器 ----CSS 子 ...

  8. CSS中的选择器之html选择器和伪类选择器

    1.html选择器(标签选择器) 基本语法: html标签名称{ 属性名:属性值; 属性名:属性值; } 继续在上面的代码中做修改,实例代码: <!DOCTYPE html> <ht ...

  9. css选择器(常规选择器，伪类选择器，伪元素选择器，根元素选择器)

    前言 CSS的一个核心特性是能向文档中的一组元素类型应用某些规则,本文将详细介绍CSS选择器 选择器 [通配选择器] 星号*代表通配选择器,可以与任何元素匹配 *{color: red;} [元素选择 ...

  10. css 类选择器结合元素选择器和多类选择器

    1.结合元素选择器 <p class="important">css</p> p.important {color: red} 匹配class属性包含imp ...

随机推荐

  1. 关于通过ip或者域名直接访问工程的问题

    1. 上篇文章 在无界面centos7上部署jdk和tomcat 里介绍了在阿里服务器上部署javaweb工程,在部署完成后,我们需要通过 ip/域名:端口 的方式访问tomcat,但是在实际项目中, ...

  2. ffmpeg使用分析视频

    https://www.cnblogs.com/Finley/p/8646711.html 先存下

  3. GUI学习之二十四——QDialog学习总结

    今天学习对话框输入控件的基类(QDialog). 一.描述 是对话类窗口(字体框.颜色选择.文件选择框等)的基类. 对话框窗口是顶级窗口(就是说不包含于哪个父类的显示界面里),主要用于短期任务和与用户 ...

  4. java定义时间

    import java.text.SimpleDateFormat; import java.util.Date; SimpleDateFormat format=new SimpleDateForm ...

  5. postman实现Base64加密

    1.新建一个Collection 2.新建一个request 3.新增一个环境变量(全局变量也可以) 4.在variable中填入需要加密的变量名称,比如password 5.在body中填好参数,需 ...

  6. 字符编码、python2和python3编码的区别

    目录 字符编码 文本编辑器存储信息的过程 python解释器解释python代码的流程 python解释器与文本编辑器的异同 不同编码格式存入与读取数据的过程 乱码的分析 python2和python ...

  7. 接口测试的一些FAQ

    近期在学习接口测试,总会有很多问题,故把前任给的经验做个记录下. 1,测试一条delete接口,delete请求后要检验什么内容: 原来删除有分为:物理删除,删除资源,删除关系,软删除 一般delet ...

  8. layui 单选框取消选中

    <ul> <li> <span class="time">17:18</span> <span class="typ ...

  9. watch和computed

    watch和computed都是以Vue的依赖追踪机制为基础的,它们都试图处理这样一件事情:当某一个数据(称它为依赖数据)发生变化的时候,所有依赖这个数据的“相关”数据“自动”发生变化,也就是自动调用 ...

  10. 前端js怎么实现大文件G级的断点续传（分块上传）和分段下载

    需求: 支持大文件批量上传(20G)和下载,同时需要保证上传期间用户电脑不出现卡死等体验: 内网百兆网络上传速度为12MB/S 服务器内存占用低 支持文件夹上传,文件夹中的文件数量达到1万个以上,且包 ...