CSS伪类选择器和伪元素选择器
CSS的伪类选择器常用的是link/visited/hover/active,分别对应未访问、已访问过、鼠标悬停、鼠标按下时的样式,常用于链接,使用时要按此顺序依次写CSS,不能乱
a:link{background-color:blue;} //未访问前深蓝色
a:visited{background-color:beige;} //访问过淡黄色
a:hover{background-color:aqua;} //鼠标悬停时水蓝色
a:active{background-color:coral;} //鼠标按下时珊瑚黄色
伪元素选择器常用的有first-line/first-letter/before/after,分别对应第一行、第一个字母、元素前插入和元素后插入样式,可用于段落
p:first-line{color:aqua;} //段落首行文字变成水蓝色
p:first-letter{font-size:50px;} //首字母字号50px
p:before{content:"~";} //段落前插入一个~字符
p:after{content:"!";} //段落后插入一个感叹号
CSS伪类选择器和伪元素选择器的更多相关文章
- css选择器(常规选择器,伪类选择器,伪元素选择器,根元素选择器)
前言 CSS的一个核心特性是能向文档中的一组元素类型应用某些规则,本文将详细介绍CSS选择器 选择器 [通配选择器] 星号*代表通配选择器,可以与任何元素匹配 *{color: red;} [元素选择 ...
- 前端(六)—— 伪类选择器:a标签的伪类、内容伪类、索引伪类、取反伪类
a标签的伪类.内容伪类.索引伪类.取反伪类 一.a标签的四大伪类 :link:未访问状态 :hover:悬浮状态 :active:活跃状态 :visited:已访问状态 四大伪类也可用于其他标签 &l ...
- 关于伪类“: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 ...
- 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 ...
随机推荐
- qt 原子操作 QAtomicInt(++和--都不是原子操作:都包含三条机器指令)
++和--都不是原子操作:都包含三条机器指令 http://sroply.blog.163.com/blog/static/17092651920106117251539/
- org.springframework.web.bind.ServletRequestDataBinde
org.springframework.validation Class DataBinder java.lang.Object org.springframework.validation.Data ...
- Apache ActiveMQ消息中间件的基本使用
Apache ActiveMQ是Apache软件基金会所研发的开放源码消息中间件:由于ActiveMQ是一个纯Java程式,因此只需要操作系统支援Java虚拟机,ActiveMQ便可执行. 支持Jav ...
- 《大数据Spark企业级实战 》
基本信息 作者: Spark亚太研究院 王家林 丛书名:决胜大数据时代Spark全系列书籍 出版社:电子工业出版社 ISBN:9787121247446 上架时间:2015-1-6 出版日期:20 ...
- bzoj1799
这是一道比较难的数位dp 因为逐位统计好像无法处理数位和整除原数的 但是有了刚才的bzoj1072的经验,我们能做的是逐位处理被一个数d整除的方案 不难想到先穷举数位和now,now最大也就162,可 ...
- (转载)Linux系统调用及用户编程接口(API)
(转载)http://www.farsight.com.cn/news/emb167.htm 1 Linux系统调用 所谓系统调用是指操作系统提供给用户程序调用的一组“特殊”接口,用户程序可以通过这组 ...
- applicationContext.xml 配置
Hibernate SQL方言 (hibernate.dialect) 数据库 hibernate方言 DB2 org.hibernate.dialect.DB2Dialect DB2 AS/400 ...
- 传输层之UDP
1.UDP的定义 跟tcp一样,我们把她定义为: 无连接的,不可靠的,用户数据报协议. 从中我们看到了:无连接和不可靠,这是它的缺点也是它的优点,因为他选择了性能,舍弃了部分安全,节约资源,速度快. ...
- 日志配置log4j 打印线程号
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 # Set root logger level to WARN and a ...
- 解决Scrapy抓取中文结果保存为文件时的编码问题
import json import codecs # Define your item pipelines here # # Don't forget to add your pipeline to ...