类选择器

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

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

所谓类就是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. Qt中添加自定义信号和槽带来的一些问题

    背景: 自己定义了一个类,并在类中添加了槽函数 class XImage : public QWidget { public: XImage(QWidget *p = 0); //重载绘制方法 upd ...

  2. linux shell 命令笔记

    标准输入.标准输出.标准错误 File descriptors are integers associated with an opened file or data stream. File des ...

  3. python 使用wxpy实现获取微信好友列表 头像 群成员

    最近在学习 python 突然想要试试能不能把微信里面的微信群和好友取出来 结果百度了一下 找到了 wxpy 这怎么能不试一下呢 用到 wxpy.threading.os.time 四个库 第一步 判 ...

  4. 关于在IOS中 contenteditable=true 无法输入的问题

    解决: 1.添加样式-webkit-user-select:text 2.如果引入了fastclick,需要添加个类名 needsclick 来源于知乎(https://www.zhihu.com/q ...

  5. 【NOIP2016提高A组模拟8.14】疯狂的火神

    题目 火神为了检验zone的力量,他决定单挑n个人. 由于火神训练时间有限,最多只有t分钟,所以他可以选择一部分人来单挑,由于有丽子的帮助,他得到了每个人特定的价值,每个人的价值由一个三元组(a,b, ...

  6. 适用于填空题出题 的随机算法 PHP

    <?php #寻找一个满足给定空数和题数要求的随机方案,事先需统计出每题空格数情况队列$m_blk,以及这些题分别有多少个$m_que. #以下算法将找到一个随机方案,若未找到将返回假值,如果不 ...

  7. linux 阿里云oss命令ossutil64 同步文件

    官方使用文档: https://help.aliyun.com/document_detail/120057.html?spm=a2c4g.11186623.4.2.1c35448ak8Ez8e [r ...

  8. 解决Eclipse中文字体横着显示的问题

    Windows ——> Perference——> General ——> Appearence ——> Colors and Fonts ——> Basic ——> ...

  9. Atcoder arc079 D Decrease (Contestant ver.) （逆推）

    D - Decrease (Contestant ver.) Time limit : 2sec / Memory limit : 256MB Score : 600 points Problem S ...

  10. python的filter,reduce,map

    1.filter filter(func,iter) 只能处理一个参数(iter),仅仅将满足func方法的数值过滤出来 如: a = [,,,,] list(filter(lambda x:x> ...