<!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. UVA 11584 "Partitioning by Palindromes"（DP+Manacher）

    传送门 •题意 •思路一 定义 dp[i] 表示 0~i 的最少划分数: 首先,用马拉车算法求解出回文半径数组: 对于第 i 个字符 si,遍历 j (0 ≤ j < i),判断以 j 为回文中 ...

  2. linux 共享队列

    一个设备驱动, 在许多情况下, 不需要它自己的工作队列. 如果你只偶尔提交任务给队列, 简单地使用内核提供的共享的, 缺省的队列可能更有效. 如果你使用这个队列, 但是, 你 必须明白你将和别的在共享 ...

  3. ZR979B. 【十联测 Day 9】唯一睿酱

    ZR979B. [十联测 Day 9]唯一睿酱 题目大意: 给定一个数组\(r_i\),表明对于第\(i\)个数来说,他是\([max(1,i - r_i),min(n,i+r_i)]\)中最大的,求 ...

  4. vue-learning：10-template-ref

    使用ref直接访问DOM元素 传统DOM操作或jQuery操作DOM,都必须是选择器先选择对应的DOM元素.比如: <button id="btn">按钮</bu ...

  5. CAS5.3 单点登录/登出/springboot/springmvc

    环境: jdk:1.8 cas server:5.3.14 + tomcat 8.5 cas client:3.5.1 客户端1:springmvc 传统web项目(使用web.xml) 客户端2:s ...

  6. Elasticsearch慢查询故障诊断

    最近在做ES搜索调优,看了一些lucene搜索的文档和代码,本文用于总结调优过程中学到的知识和自己的思考. 在抓到ES慢查询之后,会通过profile或者kibana的Search Profiler ...

  7. nor flash之频率限制

    背景 支持一款nor flash时,出于性能考虑,一般会查看其nor支持的最高频率以及主控端spi控制器的最高频率,以选择一个合适的运行频率. 对于一款主控支持多款flash的情况,还得考虑好兼容性等 ...

  8. mysql中information_schema.triggers字段说明

    1. 获取所有触发器信息(TRIGGERS) SELECT  *  FROM information_schema.TRIGGERS WHERE  TRIGGER_SCHEMA='数据库名';  TR ...

  9. 微信支付-小程序H5 公众号 Payment SDK

    前言 今天是2020年一天,去年最后一个月开发了订单和支付系统,尤其在支付系统和微信对接的时候遇到了很多坑,这里给大家总结下,以免大家遇到相同的问题还浪费大量时间 微信支付前期准备 微信商户号,需要商 ...

  10. acwing 102 -利用二分枚举区间平均值

    我真的是服了,看了一晚上发现居然,,,,, 上图吧,话说有人评论没... 对于结果来说,不一定要枚举有序数列,感觉这是一种猜结果的方法,只不过特别精确,令人发指 #include<cstdio& ...