day66-CSS伪类选择器和伪元素选择器
1. 伪类选择器：hover 和 focus 比较常用。
1.1 hover：把鼠标移动到内容迈腾2020款TSI DSG舒适型的时候，字体变成了红色。
html:
<body>
<p>迈腾2020款TSI DSG舒适型</p>
</body>
css: p:hover{color:red} 注意p和hover中间用冒号：分开。p代表所有p标签。 1.2 focus：点击文本输入框，背景颜色变成黄色。
html:
<body>
<input type="text">
</body>
css: input:focus{outline=0;background-color: yellow} outline指外框， 注意p和hover中间用冒号：分开。 1.3 active: 点击文本输入框，背景闪现黄色。如果鼠标左键按住输入框内部不放，背景一直都是黄色，放开之后黄色消失。
html:
<body>
<input type="text">
</body>
css: input:active{background-color: yellow} 同样适合用于文字：点击文字，闪现黄色，按住不放是黄色，放开之后黄色消失。
html:
<body>
<p>迈腾2020款TSI DSG舒适型</p>
</body>
css: p:active{color:yellow} 1.4 link：浏览器刚打开的时候，没访问过的链接，把baidu的字体颜色设置为绿色，接下来如果访问这个链接之后，baidu的字体颜色会恢复到原来的紫色。注意id不能是纯数字。
html:
<body>
<a id="d1" href="http://www.baidu.com">baidu</a>
</body>
css: #d1:link{color:green} 1.5 visited: 浏览器刚打开的时候，没访问过的链接，baidu的字体颜色默认是蓝色，接下来如果访问这个链接之后，baidu的字体颜色会变成红色。
html:
<body>
<a id="d1" href="http://www.baidu.com">baidu</a>
</body>
css: #d1:visited{color:red} 2. 伪元素选择器
2.1 first-letter ：常用的给首字母设置特殊样式
html:
<body>
<p>迈腾2020款TSI DSG舒适型</p>
</body>
css: p:first-letter{font-size:38px;color:red} 首字母38像素，红色。 2.2 before ：在每个<p>标签的内容之前插入*
html:
<body>
<p>迈腾2020款TSI DSG舒适型</p>
<p>迈腾2020款TSI DSG舒适型</p>
</body>
css: p:before{content:'*';color:red} 2.3 after ：在每个<p>标签的内容后面插入[?]
html:
<body>
<p>迈腾2020款TSI DSG舒适型</p>
<p>迈腾2020款TSI DSG舒适型</p>
</body>
css: p:after{content:"[?]";color:red}
day66-CSS伪类选择器和伪元素选择器的更多相关文章
- css选择器(常规选择器，伪类选择器，伪元素选择器，根元素选择器)
前言 CSS的一个核心特性是能向文档中的一组元素类型应用某些规则,本文将详细介绍CSS选择器 选择器 [通配选择器] 星号*代表通配选择器,可以与任何元素匹配 *{color: red;} [元素选择 ...
- 关于伪类“:pseudo-class”和伪元素“::pseudo-element”的常见应用
伪类用于指定要选择的元素的特殊状态,向其添加特殊的效果,比如: input { width: 515px; height: 50px; padding: 10px 20px; border: 1px ...
- CSS 伪类(下)结构性伪类\UI伪类\动态伪类和其他伪类 valid check enable child required link visit
伪类选择器汇总伪类选择器有4种, 结构性伪类\UI伪类\动态伪类和其他伪类. 具体如下 结构性伪类选择器结构性伪类选择器它能够根据元素在文档中的位置选择元素, 这类元素都有个前缀":&q ...
- 前端（六）—— 伪类选择器：a标签的伪类、内容伪类、索引伪类、取反伪类
a标签的伪类.内容伪类.索引伪类.取反伪类 一.a标签的四大伪类 :link:未访问状态 :hover:悬浮状态 :active:活跃状态 :visited:已访问状态 四大伪类也可用于其他标签 &l ...
- CSS选择器之通配符选择器和多元素选择器
1.通配符选择器 如果希望所有的元素都符合某一种样式,可以使用通配符选择器． 基本语法: *{margin:0; padding:0} 可以让所有的html元素的外边距和内边距都默认为0. 写一段ht ...
- CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解
派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...
- css3类选择器之结合元素选择器和多类选择器
css3类选择器之结合元素选择器和多类选择器用法: <!DOCTYPE html> <html lang="en"> <head> <me ...
- css：id选择器的权重>class选择器的权重=属性选择器的权重>元素选择器
最近的项目要自己写前端了,重新学习下前端的一下基本知识. 一般在css样式表中,上面的会被下面的覆盖,如下图,文字会显示蓝色: 所以按照正常的来说,下面的css样式,测试的文字应该还是蓝色 但结果,测 ...
- 前端学习笔记之CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解
派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...
- H5 14-后代选择器和子元素选择器
14-后代选择器和子元素选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
随机推荐
- 课程作业02-1-课后作业1-（1）使用组合数公式利用n!来计算
1.设计思想:运用递归阶乘的函数,依次求出n!.k!.(n-k)!,再根据组合数的公式计算(n!/(k!*(n-k)!)). 2.程序流程图: 3.源程序代码: //信1605-3 20163429 ...
- Bean Java配置
Spring 系列教程 Spring 框架介绍 Spring 框架模块 Spring开发环境搭建(Eclipse) 创建一个简单的Spring应用 Spring 控制反转容器(Inversion of ...
- AI 人工智能产业园路口-----dp
北京市商汤科技开发有限公司建立了新的 AI 人工智能产业园,这个产业园区里有 nn 个路口,由 n - 1n−1 条道路连通.第 ii 条道路连接路口 u_iui 和 v_ivi. 每个路口都布有 ...
- express连接数据库 读取表
connection 连接数据库 connection.query 查询表 1.依赖 const mysql = require('mysql'); 连接数据库代码 var connecti ...
- Android_03android拨号软件
今日开发了一个简单的安卓拨号软件. 步骤如下: 1.先构建用户界面 2.写java代码获取控件 3.进行逻辑的控制 4.添加权限 1.构建用户界面 2.点进R.java文件会发现系统已经自动生成索引, ...
- 【剑指Offer】面试题22. 链表中倒数第k个节点
题目 输入一个链表,输出该链表中倒数第k个节点.为了符合大多数人的习惯,本题从1开始计数,即链表的尾节点是倒数第1个节点.例如,一个链表有6个节点,从头节点开始,它们的值依次是1.2.3.4.5.6. ...
- 每天一点点之 taro 框架开发 - taro静态资源引入
1.说明: taro中客园自由的引用静态资源,不需要安装任何的loader 引用样式文件 通过ES6的import引入 2.引用js文件 import { functionName } from '. ...
- 22 ~ express ~ 内容评论实现
1,使用 ajax 提交评论内容 给 api.js 2,数据库 contents 增加评论字段 3,后台路由 api.js 接收并完成存储 /** 增加评论(用户,内容,时间) */ router.p ...
- bash: java: command not found
[root@izm5eab8t820b79js38tbxz ~]# java -version -bash: java: command not found 出现上面问题,解决方法: [root@iz ...
- HttpServlet中文乱码问题
客户端提交数据给服务器端(Requset) 如果数据中带有中文的话,有可能会出现乱码情况,那么可以参照以下方法解决. 如果是GET方式 1.代码转码 String username = request ...