注:该表引自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做出来的。
感谢您的浏览,希望能对您有所帮助。
本文转载自他人,为尊重原创附上原文链接:https://www.cnblogs.com/ghost-xyx/p/3763669.html
css伪类及伪元素用法的更多相关文章
-
CSS中伪类及伪元素用法详解
CSS中伪类及伪元素用法详解 伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...
-
CSS 属性 :before &;&; :after的用法,伪类和伪元素的区别
一::before && :after的用法 :before 如同对伪元素的名称一样,:before 是用来给指定的元素的内容前面插入新的内容.举例说明: .before:before ...
-
深入学习css伪类和伪元素及其用法
前言 CSS的伪类和伪元素在平时的代码中经常会出现,可是一旦别人问你,什么是伪类,什么是伪元素,可能还是不能完整的表述出来,下面我们来一探究竟. 伪类和伪元素定义 伪类用于在页面中的元素处于某个状态时 ...
-
CSS之 :before &;&; :after的用法,伪类和伪元素的区别
一::before && :after的用法 :before 如同对伪元素的名称一样,:before 是用来给指定的元素的内容前面插入新的内容.举例说明: .before:before ...
-
【从0到1学Web前端】CSS伪类和伪元素
1.CSS中的伪类 CSS 伪类用于向某些选择器加入特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...
-
CSS中的伪类与伪元素
在前端开发中,大家或多或少的有接触过CSS伪类和伪元素,使用伪元素的时候,总感觉和伪类很相似,但又不能详细的说出两者的区别和联系,那么两者到底有什么区别和联系呢? 在 W3C 中定义: 伪类:用于向某 ...
-
细说CSS伪类和伪元素
原文 简书原文:https://www.jianshu.com/p/eae56b7fe7fe 大纲 1.伪元素 2.伪类元素 3.伪元素和伪类元素的区别 4.伪类和伪元素的使用 1.伪元素 伪元素在D ...
-
CSS伪类和伪元素
一.伪类 CSS伪类用于向某些选择器添加特殊的效果,在W3规范中,CSS伪类有如下几个: CSS2.1 :active:向被激活的元素添加样式(激活是指点击鼠标那一下) :focus:向拥有键盘输入焦 ...
-
CSS 属性 - 伪类和伪元素的区别
伪类和伪元素皆独立于文档结构.它们获取元素的途径也不是基于id.class.属性这些基础的元素特征,而是在处于特殊状态的元素(伪类),或者是元素中特别的内容(伪元素).区别总结如下: ①写法不一样: ...
-
详解 CSS 属性 - 伪类和伪元素的区别[转]
首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果 ...
随机推荐
-
Mybatis
Mybatis MyBatis本是apache的一个开源项目iBatis,2010年这个项目有Apache software foundation 迁移到了Google code,并改名MyBatis ...
-
WebLogic12.1.1中跨域问题的探讨以及几种常见中间件中跨域问题的解决方法
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.问题描述 扬州现场中最开始安装了中间件WebLogic12.1.1 ...
-
LaTex随笔
最近简单接触了LaTex排版,留下一些笔记供日后参考. 1.基本格式 \documentclass{article}\title{……}\begin{document}\maketitle\secti ...
-
ftl文件格式化jsp形式显示
通过myeclipse设置ftl的编辑器为jsp的编辑器,达到效果. Myeclipse->windows->preferences 1\ 2\ 3\ 完成后即可.
-
xcode插件——新建cocos2dx工程
个人制作的一个创建cocos2dx工程的xcode小插件 按照readme安装一下即可. 创建工程后,将自动弹出finder到工程目录. 弹出窗口:
-
c#实现list,dataset,DataTable转换成josn等各种转换方法总和
using System;using System.Collections.Generic;using System.Text;using System.Data;using System.Refle ...
-
SpringMVC运行原理
一.SpringMVC运行原理图 二.相关接口解释 DispatcherServlet接口: Spring提供的前端控制器,所有的请求都有经过它来统一分发.在DispatcherServlet将请 ...
-
Oracle:WITH AS () Merge ?
WITH AS 语法在SQL SERVER 和ORACLE数据库上均支持,主要用于子查询.语法如下: WITH expression_name [ ( column_name [,...n] ) ] ...
-
10分钟上手图数据库Neo4j
随着互联网不断的发展,传统的关系型数据库如oracle,mysql已经难以支撑现下大数据量,高并发的场景了.于是,NoSQL横空出世,有像cassandra这样的column-based,像Mongo ...
-
Spark:几种给Dataset增加列的方式、Dataset删除列、Dataset替换null列
几种给Dataset增加列的方式 首先创建一个DF对象: scala> spark.version res0: String = .cloudera1 scala> val , , 2.0 ...