类选择器

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

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

所谓类就是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. VB学习一

    一.基础函数 CStr() 函数转化表达式为一个字符串 Trim() 移除字符串两侧的空白字符串或者其他预定义字符 成功:返回删除后的字符串 失败:返回空字符串 VBA.Mid(string,star ...

  2. Cannot find the declaration of element 'ehcache'.

    ehchahe.xml中报错: Cannot find the declaration of element 'ehcache'. 由于 <?xml version="1.0" ...

  3. bzoj4165 矩阵 堆维护多路归并

    题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=4165 题解 大概多路归并是最很重要的知识点了吧,近几年考察也挺多的(虽然都是作为签到题的). ...

  4. bzoj4542 [Hnoi2016]大数 莫队+同余

    题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=4542 题解 我们令 \(f_i\) 表示从 \(i\) 到 \(n\) 位组成的数 \(\bm ...

  5. Flask【第4篇】：用Flask的扩展实现的简单的页面登录

    用flask的扩展实现的简单的页面登录 from flask import Flask,render_template,request,redirect,session app = Flask(__n ...

  6. ARM指令集的最新版本包括针对JavaScript的优化

    在ARM指令集中,ARMv8.3添加了一个新的float-to-int指令,其错误和超出范围的值按照JavaScript的方式处理.以前[指令]获取JavaScript的语义要慢得多,JavaScri ...

  7. python-第三方包的安装和升级和卸载

    安装源: 豆瓣   http://pypi.douban.com/simple/ 本地安装: egg文件:  使用settools自带的安装脚本easy_install进行安装 whl文件:      ...

  8. [CF1004E] Sonya and Ice-cream

    问题描述 Sonya likes ice cream very much. She eats it even during programming competitions. That is why ...

  9. for循环性能测试

    项目中遇到需要用for循环dom节点获取每个节点保存的数据,一共有8000多条数据,但是循环加载需要18秒左右才出来. 平时for循环中数据少感觉不出来,现在数据多了就有差别了. 部分代码如下 var ...

  10. 【leetcode】1156. Swap For Longest Repeated Character Substring

    题目如下: Given a string text, we are allowed to swap two of the characters in the string. Find the leng ...