<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <title>选择器案例</title>

</head>

<style>

    span{/*这

        个叫标签选择器，把所有的span标签选出来，然后大小设置*/

        font-size: 150px;

    }

    　　.g{/*这叫类选择器*/

        color: skyblue;

    }

    　　.o{

        color: red;

    }

      　.x{

          color: orange;

      }

        .l{

          color: green;

      }

</style>

<body>

    <span class="g">G</span>

    <span class="o">o</span>

    <span class="x">o</span>

    <span class="g">g</span>

    <span class="l">l</span>

    <span class="o">e</span>

</body>

</html>

效果图如下：

注意点：

标签选择器和类选择器的区别

类选择器练习：Google 案例的更多相关文章

  1. css伪类选择器详细解析及案例使用-----伪类选择器（2）

    结构伪类选择器: <div> <ul> /*ul:only-of-type*/ <li>one</li> /*li:first-child li:nth ...

  2. css伪类选择器详细解析及案例使用-----伪类选择器（1）

    动态伪类选择器:E:link :选择匹配的E元素,并且匹配元素被定义了超链接并未被访问过.E:visited :选择匹配的E元素,而且匹配的元素被定义了连接并已被访问过.E:active :选择匹配的 ...

  3. a标签伪类选择器以及伪元素:hover的案例

    1.通过我们的观察发现a标签存在一定的状态1.1默认状态, 从未被访问过1.2被访问过的状态1.3鼠标长按状态1.4鼠标悬停在a标签上状态 2.什么是a标签的伪类选择器?a标签的伪类选择器是专门用来修 ...

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

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

  5. 【CSS3】---结构性伪类选择器—nth-child(n)+nth-last-child(n)

    结构性伪类选择器—nth-child(n) “:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素.其中“n”是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n ...

  6. Css详解之（伪类选择器）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

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

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

  8. 第91天：CSS3 属性选择器、伪类选择器和伪元素选择器

    一.属性选择器 其特点是通过属性来选择元素,具体有以下5种形式: 1.E[attr] 表示存在attr属性即可:    div[class] 2.E[attr=val] 表示属性值完全等于val:   ...

  9. HTML&CSS基础-子元素的伪类选择器

    HTML&CSS基础-子元素的伪类选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html的源代码 <!DOCTYPE html> <html& ...

随机推荐

  1. JAVA核心知识点--打包 FatJar 方法小结

    目录 什么是 FatJar 三种打包方法 1. 非遮蔽方法(Unshaded) 2. 遮蔽方法(Shaded) 3. 嵌套方法(Jar of Jars) 小结 参考阅读 原文地址:https://yq ...

  2. asp dotnet core 通过图片统计 csdn 用户访问

    在 csdn 的访问统计里面,只能用 csdn 提供的访问统计,因为在 csdn 中不支持在博客加上 js 代码,也就是无法使用友盟等工具统计. 通过在 asp dotnet core 创建一个图片链 ...

  3. codeforces 1269 E K Integers

    E. K Integers 题目连接:https://codeforces.com/contest/1269/problem/E 题意 给了一个排列p,你每次操作可以交换两个相邻的元素,现在问你最少操 ...

  4. mac系统上访问docker容器中的ip配置

    使用 mac系统,发现docker没有 docker0网桥,无法直接在宿主机上 访问 容器的ip, 在测试的时候有这种需求,而不是通过-p的方式,可以参考下面的连接,主要就是 修改 setting.j ...

  5. ES安装&常见错误

    ES常见错误 案例一 [2018-06-20T02:35:47,152][INFO ][o.e.b.BootstrapChecks ] [SUcoFrg] bound or publishing to ...

  6. springboot 动态修改定时任务

    1.静态定时 1)启动类加上注解@EnableScheduling @EnableAsync @EnableScheduling @SpringBootApplication @MapperScan( ...

  7. 专业版12.0试用，打开演示账套，提示&ldquo;列名FPlatver无效&rdquo;

    你好,我代表研发来说明一下这个问题:一.产生的原因:由于KIS产品今年陆续都增加了应用平台,前期平台兼容性还有些问题,如果一台电脑有多个不同版本的平台,就会产生冲突,因此报错.1.可能您的机器装了多个 ...

  8. ArrayList中删除null元素效率比较

    package test; import java.util.ArrayList; import java.util.Collections; import java.util.Iterator; i ...

  9. 组长组Beta阶段贡献分配规则

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2019fall/homework/9910“ “组长”组贡献分分配规则: 组里五位成员分别有入团队贡献分10分 ...

  10. FacadePattern(外观模式)-----Java/.Net

    外观模式(Facade Pattern)隐藏系统的复杂性,并向客户端提供了一个客户端可以访问系统的接口.这种类型的设计模式属于结构型模式,它向现有的系统添加一个接口,来隐藏系统的复杂性