用一个例子学习CSS的伪类元素
CSS伪类元素是一个非常酷的东西!首先我们理解一下它,:before :after 伪类元素,也就是虚假的元素。它可以插入在元素的前面或者后面,而在HTML文档结构中,它却是不存在的,因为Js是无法通过DOM去控制它的。而其用法也很简单,和一些伪类一样,如:a:hover, a:active。那么伪元素这里便是 a:before, a:after。
关于伪元素,最重要的一个属性便是 content 属性,如果CSS中的伪元素没有content属性,那么这个伪元素就是没有任何效果的。但是我们可以给它传入一个空值,来表示这个伪元素并没有东西。content: "",那么我们先直观感受一下伪元素的效果。
非常明显,我们在开发者模式里是看不见这些伪元素的,但却又确确实实被渲染出来了!这样我们可以不影响HTML结构下,非常灵活的利用这样的伪元素去做一些事情。还有我们从中也可以知道,这些伪元素生成的元素都是一些内联元素,如有必要,我们可以手动让它变成块级元素。
当然content也不仅限于传入文本,图片url(img.jpg)。最厉害的是元素的属性都可以作为参数传进来,如 attr(href),这里的意思就是将元素的href值以文本的形式作为伪元素的content。
重点当然是动手,下面就是我们一起用CSS的伪元素做一个非常酷的东西。
首先,这个div它的黑色部分全部是通过border-bottom实现的,让border-bottom和height的总和去等于width,再配合上border-radius就可以轻松实现一个圆上下黑白的颜色。然后这里有一个relative,是为了限制接下来伪元素的absolute的,这样一看,是不是有点眉目了呢?那我们继续看。
接下来便用到了我们的伪元素。我们让伪元素的content为空,然后通过height,width,border和border-radius的配合,实现同心圆的效果,并用不同的颜色和absolute和left,top值进行选择性覆盖。当然另一边同样使用这种方法,自然非常酷的八卦图就出来了。
动手要紧,觉得酷的赶紧试一下吧!
最后再说多一句,通过CSS + CSS3我们可以制作非常多的东西,大胆发挥你的想象,并始终牢记一点:“多动手!”
用一个例子学习CSS的伪类元素的更多相关文章
- 前端学习 -- Css -- 否定伪类
语法::not(.选择器) 作用:可以从已选中的元素中剔除出某些元素. <!DOCTYPE html> <html> <head> <meta charset ...
- CSS中伪类及伪元素用法详解
CSS中伪类及伪元素用法详解 伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...
- 【笔记】css hover 伪类控制其他元素
最近在模仿一个网站的项目 当中有一个效果需要利用到hover效果因为不太想写jq脚本所以百度了一下css hover的运用发现原来hover也可以控制其他元素的变化的 但是这有一个要求 就是添加hov ...
- CSS :first-child 伪类
CSS :first-child 伪类 向元素的第一个子元素添加样式,示例如下: 例 1 - 匹配第一个 <p> 元素(第一个段落显示为红色) <style type=&quo ...
- CSS :focus 伪类
:focus -- CSS :focus 伪类,适用于已获取焦点的元素的样式 语法: :focus CSS版本:CSS2 说明: 适用于已获取焦点的元素的样式,例如:表单的input输入框可以输入文字 ...
- 二.CSS的伪类
CSS的伪类(Pseudo-classes)分为两种:UI伪类和结构化伪类,伪类一般用于向某些选择器添加特殊的效果,伪类选择符用" : "进行标示,如果是“ :: ” 表示CS ...
- 关于css中伪类及伪元素的总结
css中的伪类和伪元素总是混淆,今天参考了很多资料,也查看了部分文档,现将伪类及伪元素总结如下: 一.由来: 伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述,比如CSS没有"段落 ...
- 关于css的伪类和伪元素
现在才发现自己一直没有分清楚css的伪类和伪元素啊,so,总结一下. CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相 ...
- 奇妙的CSS之伪类与伪元素
我们都知道,在CSS中有很多选择器,例如id(#), class(.),属性[attr],这些虽然可以满足一些需要,但有时候还力有未逮.伪类和伪元素就提供了一个有益的补充,可以使我们更高效编码.伪类和 ...
随机推荐
- 关于java.lang.NoClassDefFoundError: com/sun/mail/util/LineInputStream解决办法
吉林的一个项目有个错误找了一天,有段报错是: java.lang.NoClassDefFoundError: com/sun/mail/util/LineInputStream 1.遇到过两次,第 ...
- OpenGL图形管线和坐标变换[转]
1. OpenGL 渲染管线 OpenGL渲染管线分为两大部分,模型观测变换(ModelView Transformation)和投影变换(Projection Transformation).做个比 ...
- cdev_init函数
linux-2.6.22/include/linux/cdev.hstruct cdev { struct kobject kobj; // 每个 cdev 都是一个 kobje ...
- oracle判断一个字符串中是否包含另外一个字符串
select * from a where instr(a,b)>0; 用于实现B字段是A字段中的某一部分的时候,要论顺序或者要相邻的字符. 如果想要不论顺序或者不相邻的字符时,定义函数可以实现 ...
- SPRING STS Virgo OSGI 开发一 : bundle 项目的创建
1. Spring STS 下载地址 (spring 最近改了站点 暂时不是太熟悉) http://spring.io/tools/sts/all 2. 下载 Virgo 插件 htt ...
- 函数mem_area_alloc
/********************************************************************//** Allocates memory from a po ...
- ubuntu下安装mysql及外网访问设置
这么多年一直是mssql或者Oracle,mysql基本没用过,借着.net即将跨平台之际,也mysql一把.windows安装基本没啥难度,然后就是试了把linux下...结果坑不少,由于linux ...
- buildroot linux filesystem 初探
/****************************************************************************** * buildroot linux fi ...
- 简单易用的AOP/IOC框架
Source: http://www.codeproject.com/KB/Articles/684613/Working/AopIoc.zip Introduction Supper framewo ...
- 使用rsync同步Linux数据到Windows
windows: win7,cwrsyncserver 4.1.0 linux:ubuntu 14.04,rsync 3.1.0 networks:使用360wifi [Windows端] 是否使用管 ...