<!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. css图片填充的几种方式

    当图片比例不固定时,想要让图片自适应,一般都会用background-size:cover/contain,但是这个只适用于背景图. img有个属性object-fit 属性值:object-fit: ...

  2. C# json 转 xml 字符串

    本文告诉大家如何将 json 转 xml 或将 xml 转 json 字符串 首先需要安装 Newtonsoft.Json 库,打开 VisualStudio 2019 新建一个 dotnet cor ...

  3. 51nod 1832 前序后序遍历

    思路:设只有一颗子树的节点有ans个设前序边历数组为pre[100],后序遍历数组为pos[100]:前序遍历的第二个元素是A的一个子节点左右节点不知,设ax-ay表示一个树的前序遍历,bx-by表示 ...

  4. C# 多线程的等待所有线程结束

      //前台线程和后台线程唯一区别就是:应用程序必须运行完所有的前台线程才可以退出://而对于后台线程,应用程序则可以不考虑其是否已经运行完毕而直接退出,//所有的后台线程在应用程序退出时都会自动结束 ...

  5. sort排序，按指定字段进去重，sort -t "^" -k 8 -su，ls给文件名中数字排序sort -k1.5n，Tab符要转义

    sort sort 命令对 File 参数指定的文件中的行排序,并将结果写到标准输出.如果 File 参数指定多个文件,那么 sort 命令将这些文件连接起来,并当作一个文件进行排序. sort语法 ...

  6. JavaSE基础知识---常用对象API之String类

    一.String类 Java中用String类对字符串进行了对象的封装,这样的好处在于对象封装后可以定义N多属性和行为,就可以对字符串这种常见的数据进行方便的操作. 格式:(1)String s1 = ...

  7. Visual Studio Team Services使用教程【4】：默认团队checkin权限修改

    2017.4.23之后建议朋友看下面的帖子 TFS2017 & VSTS 实战(繁体中文视频) Visual Studio Team Services(VSTS)与敏捷开发ALM实战关键报告( ...

  8. Mac-安装Git以及Git的配置

    开始使用mac,发现真的不会用.最主要的是不熟悉,使用了才知道,mac默认是带了Git命令的. 原本使用Git生成一对密钥使用,生成的默认文件夹下面去了,与Windows一致,然后就找不到了. 打开命 ...

  9. 网络OSI七层架构与TCP四层架构的应用与区别

    1.OSI七层网络模型介绍 OSI(Open System Interconnection,开放系统互连)七层网络模型称为开放式系统互联参考模型 ,是一个逻辑上的定义,一个规范,它把网络从逻辑上分为了 ...

  10. CSS3(3)---2D变形(transform)

    CSS3(3)---2D变形(transform) 2D变形是CSS3中具有颠覆性的特征之一,它常用的属性有:移动(translate).缩放(scale).旋转(rotate).倾斜 (skew). ...