类选择器

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

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

所谓类就是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. 【学习】017 Mybatis框架

    一.目标 Mybatis介绍 Mybatis增删改查 SQL注入问题介绍 Mybatis xml与注解实现 Mybatis分页 二.Mybatis快速入门 2.1 Mybatis介绍 MyBatis是 ...

  2. 面试经典&&竞赛——二叉树

    To record her trees for future generations, she wrote down two strings for each tree: a preorder tra ...

  3. case_match

    //箭头符号 => 隔开了模式和表达式.//选择器 match {备选项}.//只要发现有一个匹配的case,剩下的case不会继续匹配. //object case_test {//// de ...

  4. 使用pycharm创建git项目的过程

    首先建立远程仓库,然后将远程仓库克隆到本地 然后在pycharm中以该目录创建项目(如果遇到说目录非空,不用管它,Location直接粘贴古来,不然找不到路径) 如果构建好项目说无效的SDK,那么选择 ...

  5. 绑定class -vue

    1.值为对象 :class = "{ 'text-red': isActive }" data () { return { isActive : true } } :class = ...

  6. NOIP2017 D1T1 小凯的疑惑

    洛谷P3951 看到题目,很容易想到这一题是求使ax+by=c(a,b,c∈N)无非负整数解的最大c 由裴蜀定理可知方程一定有整数解(a,b互素,gcd(a,b)=1|c) 解法一:暴力枚举 看到题目 ...

  7. 使用VisualStudio 开发Arduino

    Arduino IDE界面简洁,整体功能还算完善,相比其他编译器明显的不足就是不能进行硬件调试,再就是没有代码提示功能,文件关系不清晰.头文件打开不方便. VisualStudio作为时下最为流行的W ...

  8. React Native 中 static的navigationOptions中的点击事件不能用this

    想在某个页面中设置导航栏,title + 左右按钮(按钮上肯定需要有事件) static navigationOptions = ({ navigation, navigationOptions }) ...

  9. CF D. Labyrinth 01BFS

    由于上下走不限制,所以按照贪心,我们应该尽可能走上下方向. 我们可以开一个双端队列,并认为每次提取队首的时候得到的是到达该点的最优策略.(这个一定是唯一的,因为不可能向右走几格,然后再退回去. ) 那 ...

  10. POJ 3764 The xor-longest Path ( 字典树求异或最值 && 异或自反性质 && 好题好思想)

    题意 : 给出一颗无向边构成的树,每一条边都有一个边权,叫你选出一条路,使得此路所有的边的异或值最大. 分析 : 暴力是不可能暴力的,这辈子不可能暴力,那么来冷静分析一下如何去做.假设现在答案的异或值 ...