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伪类选择器和伪元素选择器的更多相关文章

  1. css选择器(常规选择器,伪类选择器,伪元素选择器,根元素选择器)

    前言 CSS的一个核心特性是能向文档中的一组元素类型应用某些规则,本文将详细介绍CSS选择器 选择器 [通配选择器] 星号*代表通配选择器,可以与任何元素匹配 *{color: red;} [元素选择 ...

  2. 前端(六)—— 伪类选择器:a标签的伪类、内容伪类、索引伪类、取反伪类

    a标签的伪类.内容伪类.索引伪类.取反伪类 一.a标签的四大伪类 :link:未访问状态 :hover:悬浮状态 :active:活跃状态 :visited:已访问状态 四大伪类也可用于其他标签 &l ...

  3. 关于伪类“:pseudo-class”和伪元素“::pseudo-element”的常见应用

    伪类用于指定要选择的元素的特殊状态,向其添加特殊的效果,比如: input { width: 515px; height: 50px; padding: 10px 20px; border: 1px ...

  4. CSS 伪类(下)结构性伪类\UI伪类\动态伪类和其他伪类 valid check enable child required link visit

      伪类选择器汇总伪类选择器有4种, 结构性伪类\UI伪类\动态伪类和其他伪类. 具体如下 结构性伪类选择器结构性伪类选择器它能够根据元素在文档中的位置选择元素, 这类元素都有个前缀":&q ...

  5. CSS选择器之通配符选择器和多元素选择器

    1.通配符选择器 如果希望所有的元素都符合某一种样式,可以使用通配符选择器. 基本语法: *{margin:0; padding:0} 可以让所有的html元素的外边距和内边距都默认为0. 写一段ht ...

  6. CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解

    派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...

  7. css3类选择器之结合元素选择器和多类选择器

    css3类选择器之结合元素选择器和多类选择器用法: <!DOCTYPE html> <html lang="en"> <head> <me ...

  8. css:id选择器的权重>class选择器的权重=属性选择器的权重>元素选择器

    最近的项目要自己写前端了,重新学习下前端的一下基本知识. 一般在css样式表中,上面的会被下面的覆盖,如下图,文字会显示蓝色: 所以按照正常的来说,下面的css样式,测试的文字应该还是蓝色 但结果,测 ...

  9. 前端学习笔记之CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解

    派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...

  10. H5 14-后代选择器和子元素选择器

    14-后代选择器和子元素选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

随机推荐

  1. easyui-lang-zh_CN.js导入后还是英文提示

    <script src="/js/easyUI1.3.3/jquery.easyui.min.js" type="text/javascript"> ...

  2. cocos2d-x学习笔记1——Cocos2D-x 中的核心类

    Cocos2D-x 引擎的设计思路是将游戏的各个部分抽象成几个概念,包括导演.场景.布景层和人物精灵,它们之间的关系如图3-1 所示: 导演(CCDirector): 顾名思义,导演类是游戏中的组织者 ...

  3. POJ -- 2002

    #include<iostream> #include<cstdio> #include<cstring> #include<string> #incl ...

  4. HDOJ -- 1015

    1.DFS #include<cmath> #include<cstdio> #include<cstdlib> #include<string> #i ...

  5. Ubuntu下安装Apache2, php5 mysql

    不错的博文:http://blog.csdn.net/guaikai/article/details/6905781 1:首先安装apache:打开终端(ctrl+Alt+t), 输入命令:sudo ...

  6. UVA 10256 The Great Divide (凸包,多边形的位置关系)

    题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=34148 [思路] 凸包 求出红蓝点的凸包,剩下的问题就是判断两个凸 ...

  7. FileStream的使用

    一.写入文件 string strContent = textBox2.Text.ToString(); //创建文件流(文件路径,文件操作,创建) using (FileStream fs = ne ...

  8. 3 weekend110的hadoop中的RPC框架实现机制 + hadoop中的RPC应用实例demo

    hadoop中的RPC框架实现机制 RPC是Remotr Process Call, 进程间的远程过程调用,不是在一个jvm里. 即,Controller拿不到Service的实例对象. hadoop ...

  9. C语言字节对齐 __align(),__attribute((aligned (n))),#pragma pack(n)

    转载地址 : http://blog.csdn.net/21aspnet/article/details/6729724 一.概念    对齐跟数据在内存中的位置有关.如果一个变量的内存地址正好位于它 ...

  10. (转)tar 解压缩命令

    tar -c: 建立压缩档案-x:解压-t:查看内容-r:向压缩归档文件末尾追加文件-u:更新原压缩包中的文件 这五个是独立的命令,压缩解压都要用到其中一个,可以和别的命令连用但只能用其中一个.下面的 ...