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. Linux数据管理——文件锁定

    一.什么是文件锁定 对于锁这个字,大家一定不会陌生,因为我们生活中就存在着大量的锁,它们各个方面发挥着它的作用,现在世界中的锁的功能都可归结为一句话,就是阻止某些人做某些事,例如,门锁就是阻止除了屋主 ...

  2. CentOS升级Python的方法

    centOS内核版本为:3.10.101-1.el6.elrepo.x86_64 1,下载Python安装包 wget http://www.python.org/ftp/python/2.7.6/P ...

  3. opengl学习

    #include"stdafx.h" #define GLUT_DISABLE_ATEXIT_HACK #include <GL/glut.h> //glut自动将gl ...

  4. EasyUI的增删查改(后台ASP.NET)

    转自:http://www.cnblogs.com/dedeyi/archive/2013/04/22/3035057.html 某某人曾经跟我说,你们做系统不就是增删查改吗. 是啊,很多时候我们就是 ...

  5. jQuery开始之旅

    (1)首先到http://jquery.com/download/网站进行现在jQuery库. (2)这里演示一下,使用CDN进行jQuery编程的例子: 选择的是jQuery的CDN,<scr ...

  6. HDU 5949 Relative atomic mass 【模拟】 (2016ACM/ICPC亚洲区沈阳站)

    Relative atomic mass Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Oth ...

  7. java 正则表达式去除标点符号

      public class Test { public static void main(String[] args) { String str = "!!!??!!!!%*)%¥!KTV ...

  8. Web---图片验证码生成教程详解-从简单到复杂-从本地到前后台

    首先,我们先来看本地如何生成图片验证码的,再来写输出到网页的验证码如何实现. 先来看最简单的-实现的功能是,将一个字符串变成图片写入到文件中 实现代码: package cn.hncu.img; im ...

  9. (转)PQ分区魔术师中文版分区教程

    PQ分区魔术师中文版分区的图解,图文并茂很多朋友提到硬盘分区,觉得不敢轻易去尝试,怕得不偿失,深度xp系统下载在此分享下pq分区的图解详见下图: 1)这是用的雨林木风系统的光盘,其他系统盘一样 2)首 ...

  10. Installing Ubuntu on a Pre-Installed Windows 8 (64-bit) System (UEFI Supported)

    http://askubuntu.com/questions/221835/installing-ubuntu-on-a-pre-installed-windows-8-64-bit-system-u ...