before/after伪类常见用法

1.清除浮动 ; } /*IE6/IE7*/ .clearfix:after{ display: block; content: "clear"; ; clear: both; overflow: hidden; visibility: hidden; } 2.图片居中 .box{ width:500px; height:500px; background-color:#eee; ; *font-size:200px; text-align:center; } .box img{ ve…

C++的string类常见用法

C++的string常见用法,在网上看到一篇,但是不能在c++11编译器下运行,我修改了下,还没改完: #include<iostream> #include<string> using namespace std; int main() { string str1 = "hello"; string* str2 = new string("hello"); string str3 = "world"; //获取字符串长度…

CSS 伪类 (Pseudo-classes)

CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪类 (Pseudo-classes)实例: 超链接本例演示如何向文档中的超链接添加不同的颜色. 超链接 2 本例演示如何向超链接添加其他样式. 超链接 - :focus 的使用本例演示如何对超链接应用 :focus 伪类(无法在 IE 中工作). :first-child(首个子对象) 本例演示 :first-child 伪类的用法. :lang(语言) 本例演示 :lang 伪类的用法. 语法伪类的语法: selector : ps…

实用CSS3属性之 :target伪类实现Tab切换效果

CSS3 :target伪类用来改变页面中锚链接URL所指向的ID样式,例如你要改变描链接指向#tab的元素字体颜色为蓝色,哪么你可以这样写成#tab:target {color:blue} 浏览器支持: 不支持IE8及以下的IE版本,IE9支持这个属性,其它非IE内核浏览器如:Firefox.Chrome.等这些浏览器都支持. 用法: :target伪类与:hover.:link.:visited.:focus等伪类的用法一样 :target {color:blue} 实例:CSS3 :tar…

CSS3 :target伪类的理解与使用

CSS3 :target伪类用来改变页面中锚链接URL所指向的ID元素的样式,例如你要改变描链接指向#tab的元素字体颜色为蓝色,哪么你可以这样写成#tab:target {color:blue} 浏览器支持: 不支持IE8及以下的IE版本,IE9支持这个属性,其它非IE内核浏览器如:Firefox.Chrome.等这些浏览器都支持. 用法: :target伪类与:hover.:link.:visited.:focus等伪类的用法一样 :target {color:blue} 实例:CSS3 :…

理解css伪类和伪元素

伪类就是可以通过直接添加一个类样式达到同等效果,而伪元素,则需要先添加一个元素,然后在元素上添加样式才能达到同等效果伪类 :active 向被激活的元素添加样式. :focus 向拥有键盘输入焦点的元素添加样式. :hover 当鼠标悬浮在元素上方时,向元素添加样式. :link 向未被访问的链接添加样式. :visited 向已被访问的链接添加样式. :first-child 向元素的第一个子元素添加样式. :lang 向带有指定 lang 属性的元素添加样式. 伪元素 :first-let…

理解使用before，after伪类实现小三角形气泡框

先来理解before和after伪类的用法吧,before从字面上的意思可以理解为前面的意思,它一般和content属性一起使用,把内容插入在其他元素的前面,同理after的含义就是把内容插入到其他元素的后面了.先来看一个简单的demo,如下代码: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> &…

CSS 伪类 (Pseudo-classes)实例

CSS 伪类 (Pseudo-classes)实例CSS 伪类用于向某些选择器添加特殊的效果在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬停状态. a:link {color: #FF0000} /* 未访问的链接 */a:visited {color: #00FF00} /* 已访问的链接 */a:hover {color: #FF00FF} /* 鼠标移动到链接上 */a:active {color: #0000F…

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…

js进阶 10-8 伪类选择器有哪几类（自己不用，永远不是自己的）

js进阶 10-8 伪类选择器有哪几类(自己不用,永远不是自己的) 一.总结一句话总结:自己不用,永远不是自己的. 0.学而不用,却是为何? 自己不用,永远不是自己的,有需求的时候要想到它,然后操作和练习 1.伪类选择器有哪几类? 6类,简单伪类选择器元素,子元素伪类选择器,可见性伪类选择器,内容伪类选择器,表单伪类选择器,表单属性伪类选择器 2.伪类选择器有多强大? 你想到的,没有它做不到的 3.:first(简单伪类选择器)和:first-child(子元素伪类选择器)的区别是什么? 和:…

js进阶 10-7 简单的伪类选择器可以干什么

js进阶 10-7 简单的伪类选择器可以干什么一.总结一句话总结:伪类选择器是冒号. 1.学而不用,有什么用? 多用啊,在项目中多用 2.简单的伪类选择器可以干什么? 除某元素以外,某元素的一切索引相关(奇偶,开始最后,大于小于等于) 除某元素以外,某元素的第一个,最后一个,以及某元素所有和索引相关的操作 3.伪类选择器的关键性符号是什么? 冒号,以英文冒号“:”开头 4.如何选取某一个元素中的其他元素? 用后代选择器 $('ul :not(#one)').css('color','blue…

css3的伪（伪类和伪元素）大合集

本文讲css3的伪,不是讲它有多虚伪,而是说它的伪元素样式.不得不说以前虽知html伪元素,但很少用,后得知借助css3伪元素可以发挥极大的便利.故总结css3的伪如下: CSS中存在一些比较特殊的属性,称之为伪类,它们之中最常用的就是定义链接的伪:link,:visited,:hover,:active等.除了它们,还有一些不被常使用的伪类,有:focus,:first-child,:lang等. 如下将一一介绍各伪类的用法. CSS 伪类 (Pseudo-classes)实例: 超链接本例…

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伪类对象before和after的用法

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

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

关于伪类“:pseudo-class”和伪元素“::pseudo-element”的常见应用

伪类用于指定要选择的元素的特殊状态,向其添加特殊的效果,比如: input { width: 515px; height: 50px; padding: 10px 20px; border: 1px #fff solid; font-size: 16px; box-shadow: 0 0 21px rgba(97, 104, 124, .15); vertical-align: middle; } input:focus{ border-color: #2bb3ee; } 效果: 给input元…

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

CSS中伪类及伪元素用法详解伪类的分类及作用: 注:该表引自W3School教程伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的读者可以自己尝试: 伪元素和伪类的区别从作用也可以看出伪元素:伪元素是创造关于文档语言能够指定的文档树之外的抽象.例如文档语言不能提供访问元素内容第一字或者第一行的机制.伪元素允许设计师引用它们,否则这是难以办到的.伪元素还提供样式设计师给在源文档中不存在的内容分配样式(例…

CSS :hover伪类选择定义和用法

伪类选择符E:hover的定义和用法: 设置元素在其鼠标悬停时的样式.E元素可以通过其他选择器进行选择,比如使用类选择符.id选择符.类型选择符等等.特别说明:IE6并非不支持此选择符,但能够支持a元素的:hover ,也就是只支持通过类型选择符选择的a元素的:hover . 语法结构: E:hover{ Rules } 浏览器支持: IE浏览器支持此选择符.火狐浏览器支持此选择符.谷歌浏览器支持此选择符.opera浏览器支持此选择符. 实例代码: <!DOCTYPE html> <ht…

关于css伪类:hover的用法

关于伪类:hover大家都用过,也比较熟悉.今天介绍一种新的用法(不是我发现的,但是以前一直没这么用过).在Chrome浏览器下,当a标签使用display:black;时a:hover的属性浏览器就读不到.解决的方法就是在样式名后直接添加:hover属性(.hao:hover{}).我现在要说的就是样式名称后面可以直接使用:hover,不用非要在a标签内使用.鼠标悬停的效果也会显示. 如: .ss1{color:#454545;height:25px;}.ss1:hover{color:#FF…

深入学习css伪类和伪元素及其用法

前言 CSS的伪类和伪元素在平时的代码中经常会出现,可是一旦别人问你,什么是伪类,什么是伪元素,可能还是不能完整的表述出来,下面我们来一探究竟. 伪类和伪元素定义伪类用于在页面中的元素处于某个状态时,为其添加指定的样式. 伪元素会创建一个抽象的伪元素,这个元素不是DOM中的真实元素,但是会存在于最终的渲染树中,我们可以为其添加样式. [重点]最常规的区分伪类和伪元素的方法是:实现伪类的效果可以通过添加类来实现,但是想要实现伪元素的等价效果只能创建实际的DOM节点. 注意伪类使用单冒号 ":&q…

css伪类及伪元素用法

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

nth-child,nth-last-child，only-child,nth-of-type,nth-last-of-type,only-of-type,first-of-type,last-of-type,first-child,last-child伪类区别和用法

我将这坨伪类分成三组,第一组:nth-child,nth-last-child,only-child第二组:nth-of-type,nth-last-of-type,第三组:first-of-tpye,last-of-type,第四组:first-child,last-child. ==1== nth-child定义是:其父级的第x个子元素.写法有两种: p :nth-child(x) p:nth-child(x) 第一种指的是p的第x个子元素,无需查找,明确指明父级,而子级无论是什么元素都将被…

css伪类元素：after 的多功能用法——任意大小的底边框

需求用法出现的背景: 由于项目UI的优化,项目中所有tab导航选中的状态都是统一样式书写的,之前都是用的border-bottom,新的需求如果用以前的本办法就是定位一个选中边框在底部,但是涉及的模板页面比较多,所以想在样式中统一修改,就用到了:after这个伪类元素: 优化前: 优化后: 代码: 优化前: .discount_tab .tab_a.on spanr{ border-bottom:2px solid #39A1FB;} 优化后: .discount_tab .tab_a.on s…

浅谈css常用伪类用法

着重写一下after和before的用法: css样式搞定:标签元素+伪类after a.'class名':after{//我的样式名称是这个,可以写成你自己的样式名称 content: '已打包'; display: inline-block; min-width: 10px; padding: 3px 7px; margin-left: 2px; font-size: 12px; font-weight: bold; color: #fff; line-height: 1; vertical…

CSS3 伪类选择器 nth-child() 的用法

伪类选择器 nth-child() 在IE6-8和FF3.0-浏览器不支持,CSS3中nth-of-type(n)(比如nth-of-type(1))这个特殊的类选择符可以样式更加个性的标题和段落等,不过,目前nth-of-type(n)只支持火狐3.opera.safari和chrome等部分浏览器. :nth-child()选择某个元素的一个或多个特定的子元素:你可以按这种方式进行选择: :nth-child(length);/*参数是具体数字 length为整数*/ :nth-child…

伪类:after,:before的用法

:after和:before是css3中的伪类元素.用法是像元素的前或者后插入元素.以after为例: li:after{ content: ''; color: #ff0000; } 意思是向li元素后插入一个元素,content里面是内容,下面接属性,和css写法一样.但是在实际当中我们肯定会说,直接在HTML中添加一个标签不就好了吗? 是的,这是最简单的方法.但是如果我们要添加的东西只是为了页面的优化的,而不存在实际的作用.还在里面加吗?比如我们常常接触到的清除浮动的作用,举个栗子: <!…