类选择器

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

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

所谓类就是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. 004-sed 命令使用

    sed 命令使用 主要作用是用来将数据进行选取,替换,删除,新增的命令,与vim类似 选项: -n : 只显示经过sed处理的数据,打印到屏幕 -e: 运行多个条件同时运行 -i: 直接修改文件 -p ...

  2. vb中typename函数

    适用于获得一个变量的类型名称的, 比如 A 是一个字符串变量,那么 TypeName(A)=String

  3. vue+elementUI 做的递归组件

    废话少说,直接上最新鲜的干货 当然,你得提前安装好bootstrap,router,element-ui,vue-axios 1.上递归组件,此处参考了某位大神的代码,具体不知道是谁,因为到处都有人用 ...

  4. C#知识点：委托、事件、正则表达式、SVN、找按段等差递增至不变序列的规律

    using System; using System.Collections.Generic; using System.Text; namespace Delegate { //定义委托,它定义了可 ...

  5. font-size:0; 消除空白间隙

    使用font-size:0解决设置inline-block引起的空白间隙问题 一.空白间隙问题 在进行页面布局的时候为了页面代码所谓整洁刻度,往往会设置缩进或是换行,但是元素display为inlin ...

  6. 使用HTML和CSS来实现为文字设置图片底纹

    先看一下最终实现的效果 图中的hello是文本而不是图片 那么如何实现这种效果呢? HTML部分: 创建一个h1标签 ,标签内容为(hello).通过link标签链接外部样式表style.css. s ...

  7. mybatis insert update delete返回都是整型 0，1，增，删，改要提交事物

    mybatis insert update delete返回都是整型 0,1, 没有扔 增,删,改要提交事物

  8. oracle 11g 卸载 安装10g 成功（卸载oracle+清除注册表信息+清除oracle app文件）

    停用oracle服务:进入计算机管理,在服务中,找到oracle开头的所有服务,右击选择停止 2 在开始菜单中,找到Universal Installer,运行Oracle Universal Ins ...

  9. [BZOJ1478&1488&1815][SGU282]Isomorphism：Polya定理

    分析 三倍经验题,本文以[BZOJ1478][SGU282]Isomorphism为例展开叙述,主体思路与另外两题大(wan)致(quan)相(yi)同(zhi). 这可能是博主目前写过最长也是最认真 ...

  10. Oracle Between子句

    Oracle Between子句 作者:初生不惑 Oracle基础 评论:0 条 Oracle技术QQ群:175248146 在本教程中,您将学习如何使用Oracle BETWEEN运算符来选择值在一 ...