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. listview异步加载sd卡图片

    package com.example.gridview; import java.io.File; import java.io.FileOutputStream; import java.io.I ...

  2. 【CF】310 Div.1 C. Case of Chocolate

    线段树的简单题目,做一个离散化,O(lgn)可以找到id.RE了一晚上,额,后来找到了原因. /* 555C */ #include <iostream> #include <str ...

  3. bzoj1231

    看到n<=16不难想到状压dp 我们用二进制表示前x个位置,哪些牛被已经被选过了 这里我们可以通过穷举二进制数的顺序来转移 所以二维就够了 ..] of longint;     f:.. sh ...

  4. 【转】SourceTree的简单使用

    原文网址:http://blog.csdn.net/u011439289/article/details/42126507 今天开始参与公司项目的代码编写,公司内部采用的是gitlib,所以用到了So ...

  5. 【转】Android开发之旅:环境搭建及HelloWorld

    原文网址: http://www.cnblogs.com/skynet/archive/2010/04/12/1709892.html 引言 本系列适合0基础的人员,因为我就是从0开始的,此系列记录我 ...

  6. 【Android 开源】:最火的Android开源项目 第02期

    21. drag-sort-listview DragSortListView(DSLV)是Android ListView的一个扩展,支持拖拽排序和左右滑动删除功能.重写了TouchIntercep ...

  7. 如何设置SVN提交时强制添加注释

    windows版本: 1.新建一个名为pre-commit.bat的文件并将该文件放在创建的库文件的hooks文件夹中 2.pre-commit.bat文件的内容如下: @echo off set S ...

  8. Ruby入门教程和技巧

    转自:http://blog.csdn.net/cqfz123/article/details/1349050   Ruby真的比Java更好? Ruby On Rails 创始人:对Java 说再见 ...

  9. Flash正则例子

    var jack:String = "zhuhai"; var arr:Array = ["23", "4", "67" ...

  10. SQL SERVER 自定义函数 整数转成指定长度的16进制 转换成指定长度的16进制 不足补0

    最近做项目扩展的时候,遇到问题就是将整型转换成指定长度的16进制 刚开始就是直接使用 cast(12 as varbinary(4))但是发现这个不能解决我的问题 所以就上网搜了一下,然后改了改,下面 ...