之前:target伪类,我们已经接触过了. :target是css中伪类,主要是应用在url中的#链接,以及匹配对应的id名称.例如下面的例子:代码名称http://www.wutongwei.com/#home对应的home 的结构为代码名称<section id="home"> this is target</section> 这种状态,我们可以通过CSS来体现他的效果.代码名称:target{ color:#ff6600;} 这时候,当浏览这个链接的时候,就会将对
最近我看到一些博客网站又这么一个效果: 当鼠标放到博客头部的标题时,这个链接的下划线就会以动画的方式从无到有,我觉得挺有意思的,好像京东的首页就有这个效果,大家可以看看.创建这个效果非常的简单,不需要加入额外的DOM元素到页面中,但是低版本的浏览器可能不支持CSS动画(常规下可能只显示一条下划线)首先第一件事就是需要将a标签的text-decoration去掉,设置position为相对定位.然后确保这a标签在hover状态下颜色一致性.我们这里设置这个效果只在h2标签里:代码名称h2 > a {
position: re
CSS还有着一些非常好的选择器,可能有些人还不知道,学习这些,可以帮助你在实际项目中很简单的控制你的网页.例如,你可以选择偶数和奇数元素,第一个和最后一个,下一个等等. 在本文中,我们将通过不同的场景使用不同的选择器. 我们不适用已知的一些CSS选择器,比如ID和class.我们准备学习这些选择器. 我们会解释他们的运作.甚至更多的高级的东西.1. First Line 和 First Letterp:first-letter给段落中的第一个字母样式p:first-line选择段落中的第一行2. Before 和 After:beforeCSS中使用content属性添加一个元素到当前元素之前