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. java中利用dom4j解析XML文件

    官网下载Dom4j地址:https://dom4j.github.io/ 注意:使用Dom4j开发,需下载dom4j相应的jar文件 题目:后台利用dom4j解析student.xml文件,并返回Li ...

  2. UGUI自定义组件之Image根据Text大小自动调整

    需求分析 在之前的文章中,介绍到可以使用UGUI自带的ContentSizeFitter组件,进行Button根据Text的长度自适应, UGUI ContentSizeFitter之Button根据 ...

  3. Windows 计划任务

    打开计划任务 windows 7及以下:在开始菜单中,搜索“计划任务” windwos 10:按下Win键+S,搜索“计划任务” 使用情景 在平时工作中,可以在计算机空闲时执行一些操作. 服务器机器: ...

  4. 操作系统常用调度算法（转载https://www.cnblogs.com/kxdblog/p/4798401.html）

    操作系统常用调度算法   在操作系统中存在多种调度算法,其中有的调度算法适用于作业调度,有的调度算法适用于进程调度,有的调度算法两者都适用.下面介绍几种常用的调度算法. 先来先服务(FCFS)调度算法 ...

  5. update layer tree导致页面卡顿

    前因 今天检查一个vue页面问题,就是在切换Tab时候(某些win10电脑),页面会卡顿一段很长的时间,短则3秒,长则十几秒,这个体验非常糟糕,于是我着手寻找其中原因. 概况 这个vue页面的元素非常 ...

  6. Win10 开始运行不保存历史记录原因和解决方法

    Win10 开始运行命令以后,再次打开就没有任何历史记录了,常规方法是桌面-右键-个性化-开始-显示最常用的应用..可是打开是灰色的不可选. 每次打开开始都没有以前的记录..比如需要打开下regedi ...

  7. Node.js作web服务器总结

    1.为什么Node.js用JS开发    Node.js 含有一系列内置模块,使得程序可以脱离 Apache HTTP Server 或 IIS,作为独立服务器运行. 首先,我们都清楚的是,同时接收数 ...

  8. （转）Spring Boot 2 (十)：Spring Boot 中的响应式编程和 WebFlux 入门

    http://www.ityouknow.com/springboot/2019/02/12/spring-boot-webflux.html Spring 5.0 中发布了重量级组件 Webflux ...

  9. 【APIO2018】铁人两项

    [APIO2018]铁人两项 题目描述 大意就是给定一张无向图,询问三元组\((s,c,f)\)中满足\(s\neq c\neq f\)且存在\((s\to c\to f)\)的简单路径(每个点最多经 ...

  10. 【转】如何修改 video 样式

    我们这里说的“修改 video 样式”并不是要自己实现一套 controls,而是尝试修改 video 的默认样式 隐藏全屏按钮 这个很容易查到 video::-webkit-media-contro ...