伪类的妙用

before和after这两个伪类元素分别表示元素内容的【前】【后】，利用这两个伪元素可以在元素内容的前后添加内容，其实这没有什么前后的概念，如果应用了absolute的特性之后，你可以把这些伪元素放在任何位置，有了这两个伪元素，就代表每个元素都有两个助手可供使用，灵活运用它们的话将会得到很多有趣的实现，简化许多实现。

它不存在于文档中，所以js无法操作它

它属于主元素本身，有些伪类仅仅是代表元素内容的一部分，譬如:first-letter代表第一个字母；因此当伪元素被点击的时候触发的是主元素的click事件

块级元素才能有:before, :after，譬如img就不能设置，亦即某些元素是没有:before, :after的，只要知道一般的块级元素都可以用就行了

注意在css3中，为了与伪类区分，伪元素前应该使用两个冒号，即:hover伪类，::before伪元素。当然为了向下兼容，用一个冒号也是可以的，不过建议尽量使用规范的写法。

如果想详细了解，请链接 http://imweb.io/topic/554039a673d4069201d83e59　　！！！！

时间： 2024-10-16 16:37:54

伪类的妙用的相关文章

css 伪类选择器:checked实例讲解

css :checked伪类选择器介绍 css :checked伪类选择器用于选择匹配所有被选中的单选按钮(radio)或复选框(checkbox),你可以结合:checked伪类选择器和:not选择器来匹配选择没有被选中的单选按钮或复选框. 语法: :checked { style properties } 如: input:checked{ background-color:red; } 设置被选中的单选按钮(radio)或复选框(checkbox)的背景颜色为红色(单选框和复选框只有在Op

转载【CSS进阶】伪元素的妙用--单标签之美

1.单个颜色实现按钮 hover .active 的明暗变化请点击转载利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果 2.利用after伪类清除浮动 .clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; } .clearfix { *zoom:1; } 3.增强用户体验,使用伪元素实现增大点击热区.适合用在点击区域较小的移动端,PC端看上去是

【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果

最近无论是工作还是自我学习提升都很忙,面对长篇大论的博文总是心有余而力不足,但又不断的接触学习到零碎的但是很有意义的知识点,很想分享给大家,所以本篇可能会很短. 本篇接我另一篇讲述 CSS 伪元素的文章: [CSS进阶]伪元素的妙用–单标签之美,看完本文觉得有意思的可以再去看看上一篇,分享了一些伪元素的妙用. 正文从这里开始: 哪些标签不支持伪元素? 我也是才知道这个姿势.为了不误导读者,就赶紧补充一下. 伪元素虽然强大,但是还是有一些特定的标签是不支持伪元素 before 和 after 的.

【CSS进阶】伪元素的妙用--单标签之美

最近在研读 <CSS SECRET>(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值得一看).采用单标签完成各种图案,许多图案与本文有关. 也希望觉得不错的同学顺手在我的 Github 点个 star : CSS3奇思妙想 . 正文从这里开始,本文主要讲述一下伪元素 before 和 after 各种妙用. :before和::before的区别在介绍具体用法之前,简单介绍下伪类和

关于:before和:after伪类的那些事

说明---:before,:after的作用是在指定的元素内容(不是元素本身)之前或者之后插入一个包含content属性指定内容的行内元素. 注:1.如果content的内容为空,则插入的内容默认是一个行内元素,并且在HTML代码中无法看到 2.如果没有content属性,则伪类元素没有任何作用. 3.content除了可以插入文字之外还可以插入图片等元素. 例子: <style> *{ margin:0px; padding:0px;} .divCon{ width:100px; heigh

CSS-用伪类制作小箭头（轮播图的左右切换btn）

先上学习地址:http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代替,而是用纯css制作. 第一个是left按钮,即prev: .vmc-arrow-left:after { content: "\e079"; } 第二个是right按钮的,也就是next下一张的按钮: .vmc-arrow-right:after { content: "\e

CSS3伪类实现动画旋转效果

一个简单的动画效果demo,keyframes为关键帧,图片贴在代码下方.利用了伪类实现css3动画效果,初学者可以看一下,恩.<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Keywords" content="关键词"> <meta name="D

CSS3特殊伪类::selection改变页面选中文字的样式

一般在网页上面,选中文字的时候,文字的样式是会改变的,当然,样式也都是千篇一律的浏览器的默认样式,蓝底白字,偶然看到有些网页上面当文字选中的时候会有不一样的样式,当时就很是好奇,后来才慢慢发现是css的一个伪类::selection ::selection是一个CSS3选择器(这也告诉这我们CSS3必须要去熟悉,这玩意确实可以弄出很多意想不到的好效果.) 兼容性:IE9+,Chrome,Opera,Safari,Firefox…(也可以去查看)caniuse.com#search=::selec

CSS中的伪类和伪元素

伪类伪类与类相似,但又没有类附加标签上.伪类分为UI伪类和结构化伪类. UI伪类 :link(将样式添加到未被访问的链接上) :visted(将样式已添加到访问的链接上) :hover(将样式添加到鼠标悬浮的元素上) :active(将样式添加到被激活的元素上) :focus(将样式添加到被选中的元素上) 结构化伪类 :first-child(将样式添加到第一个子元素上) :last-child(将样式添加到最后一个子元素上) 伪元素伪元素是在文档中若有实无的元素. 主要有以下几种 :fir