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 ...
随机推荐
- 吴裕雄--天生自然C++语言学习笔记：C++ 运算符
运算符是一种告诉编译器执行特定的数学或逻辑操作的符号.C++ 内置了丰富的运算符,并提供了以下类型的运算符: 算术运算符 关系运算符 逻辑运算符 位运算符 赋值运算符 杂项运算符 算术运算符 下表显示 ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)：glyphicon glyphicon-edit
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- oracle函数创建与调用
函数的定义: CREATE OR REPLACE FUNCTION FUNCTION_TEST(PARAMER1 IN VARCHAR, -- 参数的类型不写长度 PARAMER2 OUT VARCH ...
- 部署Ambari Server实战案例
部署Ambari Server实战案例 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.准备三台虚拟机(需要自行安装jdk环境) 1>.角色分配 NameNode节点: h ...
- UVA - 12563 Jin Ge Jin Qu hao（劲歌金曲）（0-1背包+滚动数组）
题意:在KTV唱歌剩下的t秒时间内,决定选最爱的n首歌中的一部分歌,在时间结束之前唱一首时长678秒的<劲歌金曲>,使得唱的总曲目尽量多(包括<劲歌金曲>),在此前提下尽量晚的 ...
- DAO三层架构及工厂模式
目录结构 1.在domain包中创建User实体类 package com.rick.domain; import java.util.Date; public class User { privat ...
- CF_448D 二分
给定n m k n和m为一个矩阵的行和列,都从1开始,矩阵的每个元素的值即为 i*j(行*列),求里面第k个数 还想找什么规律,发现虽然矩阵里面很有规律,但是n 和m在不断变化 根本不好找 其实元素从 ...
- Spring Boot without the web server
https://stackoverflow.com/questions/26105061/spring-boot-without-the-web-server/28565277 1. spring.m ...
- PTA 天梯赛 L1
L1-002 打印沙漏 细节:就是在 (i>j&&i+j<r+1) 这个区间里才有空格,然后就是 for 循环 for(r=1; ;r+=2) 条件不满足之后还会再 ...
- Java基础之反射、注解、代理
反射 笔者对反射的理解就是解剖class文件,来进行一系列操作. Class类 获取Class类实例的三种方式: 类名.class 对象.getClass() static Class forName ...