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 ...
随机推荐
- Android开源项目发现---ProgressBar 篇(持续更新)
1. SmoothProgressBar 水平进度条 项目地址:https://github.com/castorflex/SmoothProgressBar Demo地址:https://play. ...
- mysql 区间锁 对于没有索引 非唯一索引 唯一索引 各种情况
The locks are normally next-key locks that also block inserts into the "gap" immediately b ...
- 通过ip获取地理位置信息
http://ipinfo.io/developers 直接使用get请求 url: http://ipinfo.io/json 即可获得json数据
- Learning WCF Chapter1 Creating a New Service from Scratch
You’re about to be introduced to the WCF service. This lab isn’t your typical “Hello World”—it’s “He ...
- linux必会的60个命令
◆ 安装和登录命令:login.shutdown.halt.reboot.install.mount.umount.chsh.exit.last: ◆ 文件处理命令:file.mkdir.grep.d ...
- MySQL源码 数据结构hash
MySQL源码自定义了hash表,因为hash表具有O(1)的查询效率,所以,源码中大量使用了hash结构.下面就来看下hash表的定义: [源代码文件include/hash.h mysys/has ...
- 汉企C#面向对象——继承Practice
class Dianqi //创建电器类:父类 { private string _Dianqimingzi; public string Dianqimingzi { get { return _D ...
- Tag file directory /struts-tags does not start with "/WEB-INF/tags"
使用自定义标签,记得引用路径 <%@taglib prefix="s" uri="/struts-tags" %>
- POJ -- 1151
Atlantis Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 16222 Accepted: 6172 Descrip ...
- HDOJ/HDU 2140 Michael Scofield's letter(字符转换~)
Problem Description I believe many people are the fans of prison break. How clever Michael is!! In o ...