两个伪类下特有的属性 content

更加具体的可以参考:https://developer.mozilla.org/zh-CN/docs/Web/CSS/content…

CSS 伪类(下)结构性伪类\UI伪类\动态伪类和其他伪类 valid check enable child required link visit

伪类选择器汇总伪类选择器有4种, 结构性伪类\UI伪类\动态伪类和其他伪类. 具体如下结构性伪类选择器结构性伪类选择器它能够根据元素在文档中的位置选择元素, 这类元素都有个前缀":"1. 根元素选择器只作用于html等底部标签.很少用 .. :root 2. 子元素选择器子元素全选还要更细致 ul>li:first-child{ } 增加伪类firs…

在使用a中的四个属性时必须按照顺序来,不管用那两个都是要依照这个顺序来 1.a:link未访问过的状态 a:link{ color:red; } 2.a:visited已访问的 a:visited{ color:blue; } 3.a:hover鼠标移入 a:hover{ color:blue; } 4.a:active激活的时候,单击时的效果////很快,一般看不出来 a:active{ color:blue; }…

CSS的伪类 :before 和 :after

CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此.前几天发现了 Creative Link Effects 这个非常有意思的介绍创意链接特效的页面,里面惊人的效果大量使用到的特性除了 transform 属性进行变形之外,就是接下来要介绍的这两个伪元素了. Creative Button Styles 一基本语法在了解进阶的应用之前,先来了解一下语法规则.平常仅仅需要将这两个伪元素用于添加一些自定义字符时,只需使用…

认识：before和：after伪类

有时候,我们需要大量的重复代码去实现一个非常简单的功能,这不仅浪费时间,而且效率低下,例如: <div class="aa">你好</div><div class="aa">我好</div><div class="aa">大家好</div><div class="aa">前面和后面</div> 我们如果需要为每一个div添加一个动态…

CSS 属性 :before && :after的用法，伪类和伪元素的区别

一::before && :after的用法 :before 如同对伪元素的名称一样,:before 是用来给指定的元素的内容前面插入新的内容.举例说明: .before:before{content:'you before'; color:red;} <div class="before"> me</div> 在这里我们给伪元素 :before 添加了属性 content,并赋值为 you before.我们来看效果: //在指定元素的内容 m…

CSS 属性 - 伪类和伪元素的区别

伪类和伪元素皆独立于文档结构.它们获取元素的途径也不是基于id.class.属性这些基础的元素特征,而是在处于特殊状态的元素(伪类),或者是元素中特别的内容(伪元素).区别总结如下: ①写法不一样: css3 为了区分两者,明确规定伪类用一个冒号来表示,伪元素则用两个冒号来表示 :Pseudo-classes ::Pseudo-elements ②功能不一样: CSS伪类 (Pseudo-classes):用于向某些选择器添加特殊的效果,即在元素当前静态样式的基础上添加特殊效果(一般都是动态效果…

CSS伪类对象before和after的用法

一直感觉这两个伪类对象不是很重要,并且IE对它两兄弟并不支持,所以也没有怎么静下心来研究,只有在清楚浮动clearfix的时候会用到哈,其他都很少用!不过最近在研究css3的时候觉得它两个的搭配不仅能够减少代码量并且能整出很巴适的效果,所以就来研究研究哈! 一.先来看哈他们的定义哈! 1.selector:before( sRules ) 它要和content属性一起使用,设置在对象前(依据对象树的逻辑结构)发生的内容: 2.selector:after( sRules ) 和before用…

CSS选择器：伪类（图文详解）

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

CSS之 :before && :after的用法，伪类和伪元素的区别

一::before && :after的用法 :before 如同对伪元素的名称一样,:before 是用来给指定的元素的内容前面插入新的内容.举例说明: .before:before{content:'you before'; color:red;} <div class="before"> me</div> 在这里我们给伪元素 :before 添加了属性 content,并赋值为 you before.我们来看效果: //在指定元素的内容 m…

CSS伪类:first-child与:first-of-type的异同

CSS里关于元素匹配里面有两个非常类似却又不尽相同的选择器,伪类 :first-child 和 :first-of-type 两者在匹配方式上有很大差异,其实在一开始自己也没去注意这个细节,直到上次一个同事遇到同级元素匹配失败的问题后才发现原来以前的理解都不正确. 先来看看可爱的同事遇到的问题: HTML代码 <div id="add_road"> <span class="input-title">路段 I D</span> &…

python 46 边界圆角、a_img_list标签、伪类选择器

一:边界圆角 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>边界圆角</title> <style type="text/css"> .box { width: 200px; height: 200px; background-color: orange; } /*单角设置*/ .box { /*一个固定值:…

CSS躬行记（2）——伪类和伪元素

一.伪类选择器伪选择器弥补了常规选择器的不足,能够实现一些特殊情况下的样式,例如在鼠标悬停时或只给字符串中的第一个字符指定样式.与类选择器类似,可以从HTML元素的class属性中查看到,但伪选择器不会出现在HTML文档中(有几个例外,如:lang.::placeholder等).并且它的关键字大小写不敏感,也就是说empty和EMPTY完全相同.伪选择器分为两种:伪类选择器和伪元素选择器.注意,伪选择器会以一个或两个冒号(:)开头,并且如果要与其它选择器组合使用,那么只能与类型选择器(即元素…

css 04-CSS选择器：伪类

04-CSS选择器:伪类 #伪类(伪类选择器) 伪类:同一个标签,根据其不同的种状态,有不同的样式.这就叫做"伪类".伪类用冒号来表示. 比如div是属于box类,这一点很明确,就是属于box类.但是a属于什么类?不明确.因为需要看用户点击前是什么状态,点击后是什么状态.所以,就叫做"伪类". #静态伪类和动态伪类伪类选择器分为两种. (1)静态伪类:只能用于超链接的样式.如下: :link 超链接点击之前 :visited 链接被访问过之后 PS:以上两种样式,…

<a>链接的四个伪类顺序

<a>元素的作用是可以创建一个链接,链接对应4个状态:未访问,已访问,鼠标悬停,鼠标点击瞬间. 为了给链接的4个状态应用样式,引入伪类的概念. 什么是伪类呢?简单点说,就是你没定义这个类,但它确实作为一个类来使用.(这些类确实存在,浏览器在后台会向这些类增加和删除元素) 我在看<CSS设计指南>时,它说到四个伪类的书写顺序一定要正确,否则浏览器可能不会显示预期的结果. 也即这样写: a:link{color:black;} a:visited{color:gray;} a:hove…

CSS中伪类的使用

原文:http://www.cnblogs.com/guopei/archive/2011/04/16/2017627.html 何为伪类? 也就是实际实现了类的效果,但是并没有实际添加到标签中的类,这样的就是伪类.伪类的典型构成就是使用了(:)冒号. 1.先说最常用的a链接的伪类,目前市场上的主流浏览器都支持. :link 链接样式 :visited 链接访问过后的样式(只要访问历史记录存在) :hover 鼠标悬停样式 :active 鼠标按下样式其中有些规则,需要按着(Love ha)的…

利用border和伪类画出三角形 ps：好久没写博客了。。。

有一个半月没有写博客了,这段时间,小哥我经历了自入行前端最为黑暗的时期,迷茫,空虚,不想写代码,不想做研究了.连打游戏都没有兴趣,如同行尸走肉一般.还好,毕业论文的初稿完成后,整个时间段最恶心最难熬的部分已经过去了,于是乎,小哥我满血复活,继续在前端中挥舞着大宝剑,砍怪升级. 之前看极客学院的幽灵按钮视频,发现了他们在做tooltip提示框的时候,利用span标签在div下方定位一个小的三角形,至于形状的做法,利用border来实现.具体做法是:以向下三角形为例,将span的border设一个高…

使用伪类before和after

.content { padding: 20px } .content::before { content: "我是before添加的内容"; font-weight: bold } .content::after { content: "我是after添加的内容"; font-style: italic } .hover>li { position: relative; float: left; width: 80px; list-style: none;…

伪类选择器 E:nth-child(n)、E:nth-of-type(n)

结构伪类是css3新增的类型选择器. E:nth-child(n).E:nth-of-type(n)就是其中之二.搞懂了这两个,基本上跟他俩一家的其他几个兄弟伙基本上也可以弄懂了. 首先先用文字语言来描述一下这俩: E:nth-child(n): 选择父元素下的第n个子元素,并且这第n个子元素的类型为E, 还是语言描述了之后用例子比较好上面这个例子很简单,来简单分析一下样式表中的span:nth-child(2)这条语句(实际写代码不会这么随便啦,这里只是为了说明问…

CSS - 伪类和伪元素的区别

伪类和伪元素皆独立于文档结构.它们获取元素的途径也不是基于id.class.属性这些基础的元素特征,而是在处于特殊状态的元素(伪类),或者是元素中特别的内容(伪元素).区别总结如下: CSS伪类 (Pseudo-classes):用于向某些选择器添加特殊的效果,即在元素当前静态样式的基础上添加特殊效果(一般都是动态效果),所以一个元素达到一个特定状态时,它可能得到一个伪类的样式:当状态改变时,它又会失去这个样式. 属性描述 :active 向被激活的元素添加样式 :focus 向拥有键盘输入焦…

CSS选择器之伪类选择器（元素）

:first-child 选择某个元素的第一个子元素(IE6不支持) :last-child 选择某个元素的最后一个子元素 :first-of-type [CSS3]选择一个上级元素下的第一个同类子元素 :last-of-type [CSS3]选择一个上级元素的最后一个同类子元素 :only-child [CSS3]选择的元素是它的父元素的唯一一个了元素(IE6-8不支持) :only-of-type [CSS3]选择一个元素是它的上级元素的唯一一个相同类型的子元素(IE6-8不支持) :nth…

李洪强和你一起学习前端之(5)css书写位置优先级和伪类

亲爱的,时间过得真快,不知不觉我们一起学习前端已经4天了,这4天的时间里,我们是不是收获很大呢,每当我们学习一个新的知识点的时候,每当我们做出一个新的东西来的时候,我们是不是欣喜若狂,世界从来否不会辜负努力的人,每一步都算数,做iOS开发的我,我也能证明自己可以做前端,最近公司让我做前端的页面,一开始是恐惧的,这个我怎么会,但是谁都不是一开始天生就会前端的,这几天我一直没有休息好,前天晚上,为了学习前端,我一直到凌晨的三点点才睡,加上最近一直以来睡不好就头疼的毛病,真的让我吃不消,没有休息好的情…