:hover是在CSS中用来制作效果最常用到的一个伪类，比如：标签或div上的鼠标悬停效果 li:hover,div:hover等. 但这种效果是css2及以上版本才添加的，对于只支持css1的浏览器就显示不出来。 在IE6中只兼容a:hover，要使用li:hover或div：hover，需引用一个文件使其兼容： csshover.htc (点击直接查看) 放在网站的根目录下，并在css文件(或者标签)中，加上 body { behavior:url("...csshover.htc"); } 放在...
《CSS3基本选择器》 一、通配符选择器（＊） *{ marigin: 0; padding: 0; } 二、元素选择器(E) ...
CSS3的强大，让人惊叹，人们在惊喜之余，又不得不为其艰难的道路感到可惜：好的标准只有得到行业浏览器的良好支持才算得上“标准”。CSS3标 准已提出数年，但是目前能实现她的浏览器并不多，虽然部分浏览器能实现部分规范，但这又有什么用呢？面对更多的兼容性问题，CSSer们只有望洋轻叹。虽 然如此，但有前瞻性的我们，又怎能停步不前呢？今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”。 语法： :nth-child(a...
CSS输出图形 .square{width:100px;height:100px;background-color:#FFF;position:relative;border:2px #000000 solid;}.square:before{content:"";width:0px;height:0px;display:block;position:absolute;z-index:2;top:25%;right:-28px;border:15px solid #FFF;border-color:transparent transparent transparent #FFF;}.square:after{content:"";width:0px;height:0px;display:block;position:absolute;z-index:1;top:25%;right...
目标： css中after伪类，last-child伪类的使用。以及部分css3的属性。 过程： 在制作导航时，经常会遇到在每一个li后面添加一个分割符号，到最后一个元素的时候，分割符就会去掉的一种效果。 如图 那么制作这样的一个效果，怎么用纯css很简单的完成了。这里用到了css的伪类。 html部分 Home About Me Portfolio Blog Resources Contact Me 然后调用css样式 body{ background: #ebebeb;...
CSS伪类元素是一个非常酷的东西！首先我们理解一下它，:before :after 伪类元素，也就是虚假的元素。它可以插入在元素的前面或者后面，而在HTML文档结构中，它却是不存在的，因为Js是无法通过DOM去控制它的。而其用法也很简单，和一些伪类一样，如：a:hover, a:active。那么伪元素这里便是 a:before, a:after。 关于伪元素，最重要的一个属性便是 content 属性，如果CSS中的伪元素没有content属性，那么这个伪元素就是没有任...
本文向大家展示了CSS的伪类与伪元素，介绍的非常全面，这里推荐给大家参考下。 伪类 伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。 伪类选择器：CSS中...
一、伪选择器 伪选择器包括：伪类选择器和伪对象选择器，以冒号（：）作为前缀，冒号后紧跟伪类或者伪对象名称，冒号前后没有空格，否则解析为包含选择器 如： div:hover{ font-size:12px;}/*div为指定标签名hover选择符,伪类 或者 伪元素名*/ 伪选择器专门用来选择特殊区域或者特殊状态下的元素或者对象，这些特殊区域或者特殊状态是无法通过标签选择器，ID选择器或者类选择器进行精确控制的 二、伪类选择器...
关于两者的区别，其实是很古老的问题。但是时至今日，由于各种网络误传以及一些不负责任的书籍误笔，仍然有相当多的人将伪类与伪元素混为一谈，甚至不乏很多CSS老手。早些年刚入行的时候，我自己也被深深误导，因为论坛里的帖子大多不关心这种概念的细微差别，即使有人出来说一句：“这两个是不同的”，也只是被更多的帖子淹没掉而已。所以觉得有必要写下这些我所知的部分，这里着重写的是为什么这两者不同，以及一些平时容易错过的...
制作二级菜单要实现鼠标移动上去显示子菜单，鼠标移出子菜单隐藏，或者其他类似需求的地方，首先我会想到用jquery的hover事件来实现，如： $(".nav").hover(function(){ $("sub-nav").addClass("show");},function(){ $("sub-nav").removeClass("show");}); 第一个function实现鼠标移上去的样式，第二个function实现鼠标移开的样式，于是就实现了简单的下拉菜单功能。 之前一直这样做没有任何问题，然而直到昨天...
一、before和after伪类 before 在之前插入样式 结果演示 after 在之后插入样式 结果是 二、root伪类 设置最底层的样式，可用于插入背景图片 三、 input：enabled{.......
公司最近要做组件库，一些单选框，复选框，下拉菜单都需要美观自定义， 闲余时间做了一个（对浏览器要求较高的）下拉菜单的组件。 /*********实现功能 start **************/ 通过css伪类:focus实现下拉菜单基本功能 select: 点击菜单(动画过渡)展开,再次点击(动画过渡)收起; 并保证点击页面空白处和选择option同样(动画过渡)收起菜单。 option: 限制5条内容的高度，超出则滚动条，反之则自适应高度; /********...
说起css伪类，学习web前端网页设计的同学们应该对此应该不是很陌生，以前很多的网页的特效大多是通过js来实现的。但是随着CSS3不断开发，利用css实现网页的特效不仅响应不错，而且还减少了很多的代码量。开发网页代码的效率也极大提高，今天我就跟大家分享一下学习css伪类的一些小经验. 对于开始接触css的朋友来说，在看其他人的代码的时候会经常看到 :hover,:foucs,:before,:after等相关代码，其实这些就是css伪类代码。...
------------------------------------------------------------------------------------------------------------------------------------ 伪类 VS 伪元素 这两个概念很容易混淆，即使你Google或者查W3C的资料都不一定搞得清。答案其实很简单，如下： 伪类：作用对象是整个元素 首先，来看几个伪类 a:link {color: #111}a:hover {color: #222}div:first-child {color: #333}div:nth-child(3) {color: #444} 如...
a:hover{ color: #B61D1D; } .tag_a{ color: #333; } .tag_ul a{ color: #333; } //hover失效 用ul标签选中 //hover失效有效 用a标签选中 有没有大神 帮我解释一下 关于class的优先级！ 回复讨论(解决方案) 用a标签选中 加上href 既然楼主自己都试出加class后有效，，，那就加个class不就好了...