css标签选择器、类名选择器、多类名选择器

标签选择器：顾名思义，标签选择器就是在css样式中通过标签名字来对标签的样式来进行修改。
代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><style>p {   color: pink;}div {color: purple;}</style></head><body><p>人生哪有一路高歌，还不是会有低鸣。</p><p>但我们在低鸣时，千万不要忘记我们的雄心壮志。</p><p>待我们一鸣惊人时，让世间万人铭记。</p><div>人生哪有一路高歌，还不是会有低鸣。</div><div>但我们在低鸣时，千万不要忘记我们的雄心壮志。</div><div>待我们一鸣惊人时，让世间万人铭记。</div></body>
</html>

效果如下：

在上面的代码中可以在css样式中可以看到标签名字来控制样式，现在属于p标签的字体都是pink，属于div标签的字体都是purple。
类名选择器：就是通过类名来控制样式的改变，那么什么是类名呢？比如<div class="yangshi"></div>,class里面的就是类名，那么类名在css样式又是怎样被调用呢？
代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><style>.fenyun {color: orange;}.fanyou {color: blue;} </style></head><body><div class="fenyun">风带走了云，却带不走我忧伤的心情。</div><div class="fanyou">谁能解决这心中的烦忧，罢了，随风去吧！</div><div>善！</div></body>
</html>

效果如下：

在上面的代码中，代码是通过.fenyun,.fanyou来调用的。
多类名选择器：就是在一个标签中插入多个类名来控制
代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><style>.font20 {font-size: 20px;}.font14 {font-size: 14px;}.pink {color: pink;}.fontWeight {font-weight: bold;}</style></head><body><div class="pink fontWeight font20">昏暗的灯光中，似乎让这寒冷的冬天带来了一丝温暖。</div><div class="font20">人们保持着向发光的地方走去的姿态，笑容渐渐显露在脸上。</div><div class="font14 pink">但是他们早已变成了一座座冰雕。</div><div class="font14">这末世般的景象在世界各种都在发生着。</div></body>
</html>

效果如下：
可以通过多个类名一起改变同一个标签的样式。

css标签选择器、类名选择器、多类名选择器相关推荐

选择器（标签、类、多类名、id、通配符、伪类）
标签选择器标签选择器:按标签名称分类基本语法格式: 标签名{属性1:属性1;属性2:属性2:}或元素名{属性1:属性1:属性2:属性2:} <style type="text/c ...
【CSS 教程系列第 7 篇】什么是 CSS 中的 class 选择器（类选择器）、多类名选择器
这是[CSS 教程系列第 7 篇],如果觉得有用的话,欢迎关注专栏. CSS 的选择器有很多,常用的有元素选择器.id 选择器.class 选择器.后代选择器.子代选择器.并集选择器.交集选择器.伪 ...
CSS——标签选择器，类选择器
文章目录选择器(重点) CSS基础选择器标签选择器(元素选择器) 类选择器类选择器小案例小案例制作一个简易Google图标选择器(重点) 要想将CSS样式应用于特定的HTML元素,首先需要 ...
[css] 标签、class和id选择器三者的区别是什么？分别在什么时候用？
[css] 标签.class和id选择器三者的区别是什么?分别在什么时候用? 标签选择器:tag{} 选取对应的标签例如 a span div class选择器:.class-name{} 选取对应c ...
CSS标签选择器(二)
一.CSS选择器概述 1.1.CSS功能 CSS语言具有两个基本功能:匹配和渲染当浏览器在解析CSS样式时,首先应该确定哪些元素需要渲染,即匹配哪些HTML元素,这个操作由CSS样式中的选择器负责标 ...
后端码农谈前端（CSS篇）第三课：选择器
一.选择器 1.ID选择器: 语法: 首先,ID 选择器前面有一个 # 号 - 也称为棋盘号或井号. 请看下面的规则: *#intro {font-weight:bold;} 与类选择器一样,ID 选 ...
CSS基础知识（一）：选择器
文章目录前言一.CSS基础知识二.选择器 1.选择器 2.基础选择器 2.1 标签选择器 2.2 类选择器 2.3 id选择器 2.4 通配符选择器 2.5 基础选择器总结 3.复合选择器 3. ...
w3c标准 - Css - （1）基本介绍及选择器
w3c标准 - Css - (1)基本介绍及选择器 1. Css基本介绍: (1)名称层叠样式表:Cascading Style Sheets,定义如何显示HTML元素. (2)优点 a. 使页面表 ...
CSS引入方法快速生成and复合选择器
文章目录一.CSS引入方式 1.内部样式表 2.行内样式表 3.外部样式表 4.综合案例二.快速生成html结构语法三.复合选择器 1.后代选择器 2.子选择器 3.并集选择器 4.链接伪类选择 ...
CSS的四种基本选择器和四种高级选择器
CSS选择器:就是指定CSS要作用的标签,那个标签的名称就是选择器.意为:选择哪个容器. CSS的选择器分为两大类:基本选择题和扩展选择器. 基本选择器: 标签选择器:针对一类标签 ID选择器:针对某 ...

css标签选择器、类名选择器、多类名选择器

css标签选择器、类名选择器、多类名选择器

css标签选择器、类名选择器、多类名选择器相关推荐

最新文章

热门文章