1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>选择器案例</title>
  6. </head>
  7. <style>
  8.     span{/*这
  9.         个叫标签选择器，把所有的span标签选出来，然后大小设置*/
  10.         font-size: 150px;
  11.     }
  12.     　　.g{/*这叫类选择器*/
  13.         color: skyblue;
  14.     }
  15.  
  16.     　　.o{
  17.         color: red;
  18.  
  19.     }
  20.       　.x{
  21.           color: orange;
  22.  
  23.       }
  24.         .l{
  25.           color: green;
  26.       }
  27.  
  28. </style>
  29. <body>
  30.     <span class="g">G</span>
  31.     <span class="o">o</span>
  32.     <span class="x">o</span>
  33.     <span class="g">g</span>
  34.     <span class="l">l</span>
  35.     <span class="o">e</span>
  36.  
  37. </body>
  38. </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. Notice: Use of undefined constant - assumed ' '

    昨天看手册的时候有两个范例,懒得写了,直接复制,测试一下,结果报Notice; 反复检查无果,最后, 手动敲了一遍,居然正常了,汗.... 总结:偷懒害人

  2. 关于Spring JavaWeb工程中的ContextRefreshedEvent事件

    在应用启动时,通常想在此时预加载一些资源,全局使用. Spring会在操作应用上下文时,使用ApplicationEventPublisher触发相关ApplicationContextEvent,我 ...

  3. MVC，MVP，MVVM基本原理

    MVC,MVP,MVVM基本原理 模式与框架,其诞生就是为了解决日益复杂的事务处理 当同一问题不断出现,人们就会总结细分出相应的问题解决办法 当需求变得庞大的时候,就会出现细分,在细分的过程中就会出现 ...

  4. 快排java代码

    定一个基准位,递归左右两边排序. public void fun(){ int arr[] = {2,3,4,5,6,7,822,3,4,5,8,6,5,4,2,1}; //System.out.pr ...

  5. 在windows+nginx的curl操作请求超时的问题

    之前的项目在apache下进行本地curl操作的时候请求不会超时 后来要在nginx下开发的时候,我在项目中写一个curl操作的test.php文件,请求相同项目下的一个index.php文件,然后c ...

  6. SSL/TLS 配置

    Quick Start 下列说明将使用变量名 $CATALINA_BASE 来表示多数相对路径所基于的基本目录.如果没有为 Tomcat 多个实例设置 CATALINA_BASE 目录,则 $CATA ...

  7. CentOS 7 端口白名单设置

    # 查看白名单列表 firewall-cmd --zone=public --list-ports # 添加白名单端口 firewall-cmd --zone=public --add-port=/t ...

  8. To learns

    1. avro https://www.jianshu.com/p/ecbb607809c4

  9. 空气质量管理系统ssm（mybatis+spring+springMVC）框架+前后端分离

    1.目录结构: 2.需要注意的地方 2.1在WEB-INFO下新建 2.1.1 springMVC-servlet.xml <?xml version="1.0" encod ...

  10. WWDC2018 之 优化 App Assets Optimizing App Assets

    该篇博客记录了观看WWDC Session227<Optimizing App Assets>的内容以及一些理解. 引言 该session主要讲述了使用Assets Catalog的新特性 ...