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

原文:CSS中伪类及伪元素用法详解

伪类的分类及作用:

注:该表引自W3School教程

伪元素的分类及作用:

接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的读者可以自己尝试:

:active 

大致效果为用鼠标点击时,元素增加特效,鼠标松开时,特效消失。多用在按钮的点击上。

写法:

这里id为box的是一div块,在css中首先设置了他的基本样式,下面为加入:active伪类后需要修改的样式。

未点击时: 点击之后:

:active、:hover、:focus这几种常用伪类写法一致,下面就不再赘述。为了直观贴上几张GIF,方便大家理解。

正如之前所说的:active经常用在按钮的点击上:

大致写法就是:在点击之后让按钮的坐标下移1-2像素并缩小外部阴影,由此给人一种立体的感觉。当然,大家可以发挥想象,充分利用伪类来做出最炫的交互。

:hover

当我们需要对某一对象添加当鼠标悬浮之上时改变样式,就可以用到:hover伪类。

这里还是用按钮来做演示:

当光标放在按钮上,按钮的背景色和文字颜色做一反色并加上渐变,这种效果简单但吸引人。当然大家也可以随着不断学习挑战更加炫酷的效果。

这里多说一句:

:hover的好搭档cursor属性,当属性值为pointer时,如上上图,光标覆盖目标时会变成手型。cursor还有url属性,其为设置图片地址。

在之后用javascript或者HTML5做游戏时,系统的光标就显得格格不入了。这里可以通过cursor将光标变成你想要的手型图片,比如这样的:

此时cursor属性可以放在全局body{}里或者任何你需要的地方。

:focus

当我们需要让点击之后的元素一直拥有某些样式,这时用:active就不行了,因为松开鼠标样式会消失。:focus可以用在<input>标签上。

这是之前做过一简单的表单:

:focus与之前伪类所产生的来不一样的效果:

:first-child

对元素的第一个子元素添加样式,常用在ol,ul下面的li,或者tr下面的td或th上等等。

效果:

实际中常用到的地方:

在实际编写页面上,经常会有像上图一样的布局。多个图片并排放在一行,对于多个样式相似并排的元素我们通常将其放在列表标签里的<li></li>中,这时我们可以先在li的样式中用margin-right来设置li之间的间距既每张图间的间距,

之后在li的:first-child中通过margin-left来设置第一张与左边界的距离,从而调整好整排图片或元素在网页中的布局。

伪元素:before和:after

二者的作用为在元素之前或之后插入某些内容,注意:这里的“前后”并不是位置上的前后,而是文档流里的前后。

通常情况下用来做这个:

这个:

以及这个:

都是一些指引型的小三角或者小箭头之类的。

代码:

通过给一div附上某一小图标,然后设置与该div的相关位置。

content中的内容参见unicode几何图形列表,由于过大就不在这里贴了,只截取一小部分展示下,有兴趣的朋友百度吧。

当然!!before及after的用法绝不这么简单!

你可以将content属性设置为“”,然后尽情发挥想象:

这里不仅用了:hover,按钮外部的光圈就是通过:before做出来的。

感谢您的浏览,希望能对您有所帮助。

CSS中伪类及伪元素用法详解,布布扣,bubuko.com

时间: 2024-10-12 17:15:33

CSS中伪类及伪元素用法详解的相关文章

oracle中的exists 和not exists 用法详解

oracle中的exists 和not exists 用法详解 有两个简单例子,以说明 “exists”和“in”的效率问题 1) select * from T1 where exists(select 1 from T2 where T1.a=T2.a) ; T1数据量小而T2数据量非常大时,T1<<T2 时,1) 的查询效率高. 2) select * from T1 where T1.a in (select T2.a from T2) ; T1数据量非常大而T2数据量小时,T1>

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的主要方法,其中包括定制任务,添加任务 * 退出任务,退出定时器.

css中的px、em、rem 详解

概念介绍: 1.px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印时一般都有DPI可选.Windows系统默认是96dpi,Apple系统默认是72dpi. 2.em(相对长度单位,相对于当前对象内文本的字体尺寸):是一个相对长度单位,最初是指字母M的宽度,故名em.现指的是字符宽度的倍数,用法类似百分比,如:0.8em, 1.2em,2em等.通常1em=16px

CSS中position属性( absolute | relative | static | fixed )详解

我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置.而其层叠通过z-index属性定义. absolute:对象脱离正常文档流,使用top,right,bottom,left等属性进行绝对定位.而其层叠通过z-index属性定义. fixed:对象脱离正常文档

【转】CSS中position属性( absolute | relative | static | fixed )详解

我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置.而其层叠通过z-index属性定义. absolute:对象脱离正常文档流,使用top,right,bottom,left等属性进行绝对定位.而其层叠通过z-index属性定义. fixed:对象脱离正常文档

C#中常见的系统内置委托用法详解(抄录)

C#中常见的系统内置委托 Action类.Func类.Predicate<T>.Comparison<T>委托 Action类的委托 Action委托 封装一个方法,该方法不具有参数并且不返回值 Action<T>委托 封装一个方法,该方法只有一个参数并且不返回值 Action<T1,T2>委托 封装一个方法,该方法具有两个参数并且不返回值 static void Main(string[] args) { #region Action<T>委托

JAVA中的饿汉式和饱汉式单例模式及jdk中Runtime类的单例模式实现方式详解

一.描述 单例模式是一种非常常见的设计模式,即一个类只能有一个对象(实例),一般通过将该类的构造器私有化,来阻止在该类外创建该类的对象,并提供给外界一个唯一的对象(这个对象在该类中创建). java中的单例模式常见的有两种实现方式,一种是恶汉方式,即将该类对象用static休息并且在类加载的时候进行初始化:另一种是饱汉方式,在程序中需要用到该对象的时候才初始化,一旦初始化一次就不会再重新生成该对象. JDK中的Runtime类其实也是一种单例模式,而且其采用的是饿汉的方式. 二.源代码 pack

CSS中Backgroud-position(背景图片)定位问题详解

background-position的说明:    设置或检索对象的背景图像位置.必须先指定 background-image 属性.该属性定位不受对象的补丁属性( padding )设置影响.    默认值为: 0% 0% .此时背景图片将被定位于对象不包括补丁( padding )的内容区域的左上角.    如果只指定了一个值,该值将用于横坐标.纵坐标将默认为 50% .如果指定了两个值,第二个值将用于纵坐标.    如果设置值为 right center,因为 right 作为横坐标值将

C#中哈希表(HashTable)的用法详解以及和Dictionary比较

1.  哈希表(HashTable)简述 在.NET Framework中,Hashtable是System.Collections命名空间提供的一个容器,用于处理和表现类似keyvalue的键值对,其中key通常可用来快速查找,同时key是区分大小写:value用于存储对应于key的值.Hashtable中keyvalue键值对均为object类型,所以Hashtable可以支持任何类型的keyvalue键值对. 2. 什么情况下使用哈希表 (1)某些数据会被高频率查询(2)数据量大(3)查询