css伪类大全用法详解

CSS伪类及伪元素选择器,如超链接的a:link、a:visited、a:hover等等,

一、超链接

a:link{ color:red;}

a:visited{ color:blue;}

a:hover{ color:black;}

a:active{ color:#6600CC;}

注意:设置的顺序不能变,遵循爱恨(love/hate)原则。 ——此原则自己在网上看别人说的,便于记忆就写在这了

二、更多伪类

:root   ------------------------------ 文档的根

:nth-child(n)  --------------------- 作为其父元素的第n个孩子的一个元素

:nth-last-child(n) ---------------- 作为其父元素的第n个孩子的一个元素,从最后一个数起

:nth-of-type(n)  ------------------ 作为其类型的第n个兄弟的一个元素

: nth-last-of-type(n)  -----------  作为其类型的第n个兄弟的一个元素,从最后一个数起

:first-child   ----------------------   作为其父元素的第1个孩子的一个元素

:last-child  -----------------------   作为其父元素的最后1个孩子的一个元素

:first-of-type  --------------------   作为其类型的第1个兄弟的一个元素

:last-of-type   -------------------    作为其类型的第1个兄弟的一个元素,从最后一个数起

:only-child     --------------------   作为其父元素的唯一1个孩子的一个元素

:only-of-type  -------------------   作为其类型的唯一1个兄弟的一个元素

:empty  --------------------------  没有孩子或文本的一个元素

三、一些伪元素

:first-letter    第一个字母

:after       选择元素的后面,允许在这些位置插入内容

:before    选择元素的前面,允许在这些位置插入内容

时间: 2024-10-06 10:49:54

css伪类大全用法详解的相关文章

CSS选择器:伪类(图文详解)

本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 伪类(伪类选择器) 伪类:同一个标签,根据其不同的种状态,有不同的样式.这就叫做"伪类".伪类用冒号来表示. 比如div是属于box类,这一点很明确,就是属于box类.但是a属于什么类?不明确.因为需要看用户点击前是什么状态,点击后是什么状态.所以,就叫做"伪类". 静态伪类和动态伪类 伪类选择器分为两种. (1)静态伪类:只能用于超链接的

Java反射机制Class类的用法详解

本文转自http://blog.sina.com.cn/s/blog_6c9536b90100rqh4.html,感谢作者 java的Class类是java反射机制的基础,通过Class类我们可以获得关于一个类的相关信息,下面我们来了解一下有关java中Class类的相关知识! java.lang.Class是一个比较特殊的类,它用于封装被装入到JVM中的类(包括类和接口)的信息. 当一个类或接口被装入的JVM时便会产生一个与之关联的java.lang.Class对象,可以通过这个Class对象

CSS中Position 的用法详解。

记得一年前,到一家公司面试的时候,问我position有哪几个属性,我憋半天才回答出2个,大家估计都清楚,就是我们经常用到的2个(relative,absolute). 最近又用到了好多,深入研究了下. 一.语法: position:static | relative | absolute | fixed 取值: static :默认值,无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用,默认值. relative:相对定位,对象遵循正常文档流,但将依据t

CSS中伪类及伪元素用法详解

原文:CSS中伪类及伪元素用法详解 伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的读者可以自己尝试: :active  大致效果为用鼠标点击时,元素增加特效,鼠标松开时,特效消失.多用在按钮的点击上. 写法: 这里id为box的是一div块,在css中首先设置了他的基本样式,下面为加入:active伪类后需要修改的样式. 未点击时: 点击之后: :active.:hover.:

1:CSS中一些@规则的用法小结 2: @media用法详解

第一篇文章:@用法小结 第二篇文章:@media用法 第一篇文章:@用法小结 这篇文章主要介绍了CSS中一些@规则的用法小结,是CSS入门学习中的基础知识,需要的朋友可以参考下 at-rule是一个声明,为CSS提供执行或怎么表现的指令.每个声明以@开头,后紧跟一个可用的关键字,这个关键字充当一个标识符,用于表示CSS该做什么.这是一个通用的语法,尽管每个at-rule有其它语法变体.常规规则 常规规则遵循下面的语法: 复制代码 代码如下: @[KEYWORD] (RULE); @charset

CSS margin用法详解

CSS的margin用法详解:建议:尽可能的手写代码,可以有效的提高学习效率和深度.margin属性在网页中使用非常的频繁,所以这里详细介绍一下此属性的用法.此属性用来定义对象的外边距的,也称之为外补白,所谓的外边距就是围绕边框外侧的空白区域.可以单独定义上下左右某一方位的外边距.代码实例如下:实例一:子div没有外边距的情况: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> &

CSS的padding用法详解

CSS的padding用法详解:建议:尽可能的手写代码,可以有效的提高学习效率和深度.padding属性在网页中使用非常的频繁,所以这里详细介绍一下此属性的用法.此属性用来定义元素的内边距或者内补白,所谓的内边距就是元素中的内容与元素内侧之间的空白区域.可以单独定义上下左右某一方位的内边距.代码实例:实例一:没有设置父div的内边距的时候: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"

java定时任务类Timer和TimerTask用法详解

原文:java定时任务类Timer和TimerTask用法详解 代码下载地址:http://www.zuidaima.com/share/1550463277550592.htm package com.zuidaima.util; import java.io.IOException; import java.util.Timer; import test.MyTask; /* * 本类给出了使用Timer和TimerTaske的主要方法,其中包括定制任务,添加任务 * 退出任务,退出定时器.

XStream 用法详解 XML 转换为 java 实体类

XStream 用法详解 java 类与 XML 互换 现在 WEB数据交换的时代,传送XML目前是一个比较流行的方式,具有统一的规则约束,为实现后台接口提供了一个很方便的实现. 我编写了一个 接收XML并转换成所需要的Object类的 小例子,希望能够对做互联网数据传输.接口调用的朋友有所帮助. 首先要导入jar包xstream-1.4.3-sources.jar 和 xmlpull-1.1.3.1.jar 两个包: 其次是预备一个 XML 事例 <config> <span styl