<!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. [转]C#操作Memcached帮助类

    在VS中安装Memcached,直接在NuGet下搜索Memcached,选择第一个进行安装: 服务端资源下载地址:https://pan.baidu.com/s/1gf3tupl 接下来开始写程序, ...

  2. 如何读取redis中的key值中的结果

    redis的值有5种类型,不同的类型有不同的命令来获取: 字符直接 get key 队列 左端弹出一个元素  LPOP key 哈希 HGET key field 集合 SMEMBERS key 返回 ...

  3. tf.train.slice_input_producer()

    tf.train.slice_input_producer处理的是来源tensor的数据 转载自:https://blog.csdn.net/dcrmg/article/details/7977687 ...

  4. P1051 八皇后问题

    题目描述 在国际象棋中,皇后是同时具备象和车的攻击范围的,它可以横竖移动,也可以斜着移动.那么在一个8*8的标准国际象棋棋盘中,我们要放入8个皇后,同时皇后之间无法互相攻击,问有多少种皇后的放置方法. ...

  5. asp dotnet core 图片在浏览器没访问可能原因

    我写了一个项目用来广告就用到广告的图片,但是广告的图片放在博客的链接无法访问,连我的方法都没有调用,而我尝试网页直接访问图片链接是可以访问的,最后找到原因是广告插件禁用了图片访问 我在一个方法创建了广 ...

  6. Vue与React比较

    与React 相似: (1)虚拟DOM(Virtual DOM) 虚拟DOM的诞生是基于:改变真实的DOM状态远比改变一个JS对象的花销要大的多. 虚拟DOM是一个映射真实DOM的JS对象,当有变化产 ...

  7. linux PCI 寻址

    每个 PCI 外设有一个总线号, 一个设备号, 一个功能号标识. PCI 规范允许单个系统占 用多达 256 个总线, 但是因为 256 个总线对许多大系统是不够的, Linux 现在支持 PCI 域 ...

  8. 纵我不往,知识不来--学习Java第一周心得

    暑假第一周,也是开始学习java的第一周. 本周的主要时间花在了小学期的任务上,但也草草开始了java的学习.首先安装好了所需要的软件,然后在网上下载了一份<Java基础笔记>,看了前五章 ...

  9. C++,Windows/MFC_中L和_T()之区别

    字符串前面加L表示该字符串是Unicode字符串._T是一个宏,如果项目使用了Unicode字符集(定义了UNICODE宏),则自动在字符串前面加上L,否则字符串不变.因此,Visual C++里边定 ...

  10. 最长公共前缀 leetcode 14

    方法一(纵向扫描) 解题思路 先计算出数组中最小的字符串长度,这样就避免了越界的情况,思路更加明确,但同时时间复杂度就相应的上升了. 先计算所有字符串在同一列上的字符是否相同,然后依次向后延伸. 代码 ...