类选择器练习：Google 案例
<!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 案例的更多相关文章
- css伪类选择器详细解析及案例使用-----伪类选择器（2）
结构伪类选择器: <div> <ul> /*ul:only-of-type*/ <li>one</li> /*li:first-child li:nth ...
- css伪类选择器详细解析及案例使用-----伪类选择器（1）
动态伪类选择器:E:link :选择匹配的E元素,并且匹配元素被定义了超链接并未被访问过.E:visited :选择匹配的E元素,而且匹配的元素被定义了连接并已被访问过.E:active :选择匹配的 ...
- a标签伪类选择器以及伪元素:hover的案例
1.通过我们的观察发现a标签存在一定的状态1.1默认状态, 从未被访问过1.2被访问过的状态1.3鼠标长按状态1.4鼠标悬停在a标签上状态 2.什么是a标签的伪类选择器?a标签的伪类选择器是专门用来修 ...
- CSS3 选择器——笔记+实战案例(基本选择器、组合选择器、属性选择器、伪类选择器)
使用CSS3 选择器——笔记 CSS通过选择器控制HTML元素,CSS选择器对网页对象可以实现一对一.一对多或者多对一的匹配. 一.CSS3选择器分类 CSS选择器在CSS2.1选择器的基础上新增了属 ...
- 【CSS3】---结构性伪类选择器—nth-child(n)+nth-last-child(n)
结构性伪类选择器—nth-child(n) “:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素.其中“n”是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n ...
- Css详解之（伪类选择器）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- python 全栈开发，Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)
一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...
- 第91天：CSS3 属性选择器、伪类选择器和伪元素选择器
一.属性选择器 其特点是通过属性来选择元素,具体有以下5种形式: 1.E[attr] 表示存在attr属性即可: div[class] 2.E[attr=val] 表示属性值完全等于val: ...
- HTML&CSS基础-子元素的伪类选择器
HTML&CSS基础-子元素的伪类选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html的源代码 <!DOCTYPE html> <html& ...
随机推荐
- vue项目多列导入
用axios.post传一个数组参数使用:JSON.stringify(this.params) <form> <span class="upimg">&l ...
- 备战省赛组队训练赛第十四场(UPC)
codeforces:传送门 upc:传送门 外来题解: [1]:https://blog.csdn.net/ccsu_cat/article/details/86707446 [2]:https:/ ...
- selenium经过WebDriverWait实现ajax测试
当前位置:我的异常网» Web前端 » selenium经过WebDriverWait实现ajax测试 selenium经过WebDriverWait实现ajax测试 www.MyException. ...
- HDU1166 敌兵布阵 BZOJ1012 最大数[树状数组]
一.前置知识-树状数组 树状数组(binary indexed tree)是一种简洁的代码量很小的数据结构,能够高效的处理前缀区间上的问题.在很多情况下能写树状数组解决的就不用码半天线段树了. 树状数 ...
- 第二阶段：4.商业需求文档MRD：3.PRD-页面结构图
这也是功能结构以及优先级 这是页面层级 页面结构图 再细分某一个频道或者子页面 层层细分 用mind做的页面结构图 里面也包含了功能
- Autofac总结
Autofac 介绍|术语 控制反转:IOC和DI IOC 调用者不再创建(不自己new)被调用者的实例,而是交给容器去创建(AutoFac就充当这里的容器),这就是控制反转 控制反转中引入的第三方对 ...
- leetcode.1266访问所有点的最小时间
平面上有 n 个点,点的位置用整数坐标表示 points[i] = [xi, yi].请你计算访问所有这些点需要的最小时间(以秒为单位). 你可以按照下面的规则在平面上移动: 每一秒沿水平或者竖直方向 ...
- 洛谷$1156$ 垃圾陷阱 $dp$
\(Sol\) \(f_{i,j}\)前\(i\)个垃圾,能活到时间\(j\)的最高垃圾高度.\(t_i\)表示第\(i\)个垃圾掉落的时间,\(g_i\)表示吃垃圾\(i\)能维持的时间,\(h_i ...
- 洛谷P5664 Emiya 家今天的饭 题解 动态规划
首先来看一道题题: 安娜写宋词 题目背景 洛谷P5664 Emiya 家今天的饭[民间数据] 的简化版本. 题目描述 安娜准备去参加宋词大赛,她一共掌握 \(n\) 个 词牌名 ,并且她的宋词总共有 ...
- BFS小记
题目:求从S走到G点所需步数 #S######.#......#..#.#.##.##.#.#........##.##.####....#....#.#######.#....#......#### ...