10-类选择器



错误的写法:

-->

迟到毁一生

早退穷三代

按时上下班

必成高富帅

我是段落

我是段落

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>10-类选择器</title>

    <style>

        .pp{

            color: red;

        }

        .ppp{

            color: green;

        }

        .pppp{

            color: blue;

        }

        .ppppp{

            color: yellow;

        }

        .para1{

            font-size: 100px;

        }

        .para2{

            font-style: italic;

        }

    </style>

</head>

<body>

<!--

1.什么是类选择器?

作用: 根据指定的类名称找到对应的标签, 然后设置属性

格式:

.类名{

    属性:值;

}

注意点:

1.每个HTML标签都有一个属性叫做class, 也就是说每个标签都可以设置类名

2.在同一个界面中class的名称是可以重复的

3.在编写class选择器时一定要在class名称前面加上.

4.类名的命名规范和id名称的命名规范一样

5.类名就是专门用来给CSS设置样式的

6.在HTML中每个标签可以同时绑定多个类名

格式:

<标签名称 class="类名1 类名2 ...">

错误的写法:

<p class="para1" class="para2">

-->

<p class="pp">迟到毁一生</p>

<p class="ppp">早退穷三代</p>

<p class="pppp">按时上下班</p>

<p class="ppppp">必成高富帅</p>

<p class="para1 para2">我是段落</p>

<p class="para1 para2">我是段落</p>

</body>

</html>

H5 类选择器的更多相关文章

  1. H5与CS3权威下.19 选择器（2）结构性伪类选择器

    1.CSS中的伪类选择器及伪元素 (1)与自定义的class类选择器不同,伪类选择器是CSS中已经定义好的选择器. eg:a:link{color:#ff0000;} (2)伪元素的使用方法: 选择器 ...

  2. css伪类选择器及伪元素选择器

    1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...

  3. CSS 简介、语法、派生选择器、id 选择器、类选择器、属性选择器

    CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现 ...

  4. python 全栈开发，Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)

    一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...

  5. js进阶 10-8 伪类选择器有哪几类（自己不用，永远不是自己的）

    js进阶 10-8 伪类选择器有哪几类(自己不用,永远不是自己的) 一.总结 一句话总结:自己不用,永远不是自己的. 0.学而不用,却是为何? 自己不用,永远不是自己的,有需求的时候要想到它,然后操作 ...

  6. js进阶 10-7 简单的伪类选择器可以干什么

    js进阶 10-7 简单的伪类选择器可以干什么 一.总结 一句话总结:伪类选择器是冒号. 1.学而不用,有什么用? 多用啊,在项目中多用 2.简单的伪类选择器可以干什么? 除某元素以外,某元素的一切索 ...

  7. 彻底搞懂CSS伪类选择器：is、not

    本文介绍一下Css伪类:is和:not,并解释一下is.not.matches.any之前的关系 :not The :not() CSS pseudo-class represents element ...

  8. CSS伪类选择器：is、not

    本文介绍一下Css伪类:is和:not,并解释一下is.not.matches.any之前的关系 :not The :not() CSS pseudo-class represents element ...

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

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

随机推荐

  1. BurpSuit2.0专业版破解

    简介 Burp Suite 是用于攻击web 应用程序的集成平台.它包含了许多Burp工具,这些不同的burp工具通过协同工作,有效的分享信息,支持以某种工具中的信息为基础供另一种工具使用的方式发起攻 ...

  2. Oracle EBS R12 GL_IMPORT_REFERENCES 映射

    非原创. 转自出处: http://alloracleapps.com/oracle_apps/gl_import_references-columns-mapping-11i-vs-r12/

  3. web前端（3）—— html标签及web页面结构

    本节内容简单介绍下html都有哪些标签 还是百度首页,查看源代码看看: 我把源代码复制下来另存为html文件里: 注意:网页文件的后缀都是html或者htm 我这用的pycharm编辑器(Python ...

  4. IPerf——网络测试工具介绍与源码解析（2）

    对于IPerf源码解析,我是基于2.0.5版本在Windows下执行的情况进行分析的,提倡开始先通过对源码的简单修改使其能够在本地编译器运行起来,这样可以打印输出一些中间信息,对于理解源码的逻辑,程序 ...

  5. Kernel数据结构移植（list和rbtree）

    主要移植了内核中的 list,rbtree.使得这2个数据结构在用户态程序中也能使用. 同时用 cpputest 对移植后的代码进行了测试.(测试代码其实也是使用这2个数据结构的方法) 内核代码的如下 ...

  6. hashcode相等两个类一定相等吗?equals呢?相反呢?

    hashCode相等,equals也不一定相等, 两个类也不一定相等 equals相同, 说明是同一个对象, 那么hashCode一定相同 哈希表是结合了直接寻址和链式寻址两种方式,所需要的就是将需要 ...

  7. A. On The Way to Lucky Plaza 概率 乘法逆元

    A. On The Way to Lucky Plaza time limit per test 1.0 s memory limit per test 256 MB input standard i ...

  8. 利用nginx搭建小型的文件服务器

    PS内的文件如果需要共享给其他计算机下载,可以选择ftp的方式,优点是操作性很高,修改删除下载等等都可以,但是速度略慢. 如果仅仅是将VPS作为文件中转站,可以尝试用Nginx架设一个简单的文件服务器 ...

  9. 这些Linux命令，让你的工作事半功倍！

    这些Linux命令,让你的工作事半功倍! 最近都在和Linux打交道,感觉还不错.我觉得Linux相比windows比较麻烦的就是很多东西都要用命令来控制,当然,这也是很多人喜欢linux的原因,比较 ...

  10. centos7下安装docker（21docker swarm集群创建）

    创建swarm集群: 实验环境:盗图 swarm-manager是manager node,swarm-worker1和swarm-worker2是worker node. 所有节点的docker版本 ...