目标：

css中after伪类，last-child伪类的使用。以及部分css3的属性。

过程：

在制作导航时。常常会遇到在每个li后面加入一个切割符号，到最后一个元素的时候，切割符就会去掉的一种效果。

如图

那么制作这种一个效果。怎么用纯css非常easy的完毕了。这里用到了css的伪类。

html部分

<body>

	<ul class="nav">

    	<li><a href="">Home</a></li>

    	<li><a href="">About Me</a></li>

    	<li><a href="">Portfolio</a></li>

    	<li><a href="">Blog</a></li>

    	<li><a href="">Resources</a></li>

    	<li><a href="">Contact Me</a></li>

	</ul>

</body>

然后调用css样式

body{

		  background: #ebebeb;

		}

		.nav{

		  width:560px;

		  height: 50px;

		  font:bold 0/50px Arial;

		  text-align:center;

		  margin:40px auto 0;

	      background: #f65f57;

		  /*制作圆*/

		  border-radius:9px;

          /*制作导航立体风格*/

          box-shadow:0px 5px #911;

		}

		.nav a{

		  display: inline-block;

		  -webkit-transition: all 0.2s ease-in;

		  -moz-transition: all 0.2s ease-in;

		  -o-transition: all 0.2s ease-in;

		  -ms-transition: all 0.2s ease-in;

		  transition: all 0.2s ease-in;

		}

		.nav a:hover{

		  -webkit-transform:rotate(10deg);

		  -moz-transform:rotate(10deg);

		  -o-transform:rotate(10deg);

		  -ms-transform:rotate(10deg);

		  transform:rotate(10deg);

		}

		.nav li{

		  position:relative;

		  display:inline-block;

		  padding:0 16px;

		  font-size: 13px;

		  text-shadow:1px 2px 4px rgba(0,0,0,.5);

		  list-style: none outside none;

		}

		/*使用伪元素制作导航列表项分隔线*/

		<span style="color:#ff0000;">.nav li:after</span>{

    	<strong> content:"";

         position:absolute;

         top:15px;

         right:0px;

         width:1px;

         height:15px;

         background:linear-gradient(to bottom, #f82f87,#B0363F,#f82f87);</strong>

		}

        /*删除第一项和最后一项导航分隔线*/

		<span style="color:#ff0000;">.nav li:last-child:after</span>{

    <strong>	 width:0px;

         height:0px;</strong>

		}

		.nav a,

		.nav a:hover{

		  color:#fff;

		  text-decoration: none;

		}

css中的.nav li:after表明了在每个li后面加入一个元素。正是content内容（制作渐变时。不须要有内容被加入。所以为空）。

background:linear-gradient(to bottom ,#f82f87,#bo363f,#f82f87) //css3中的渐变样式

对每个li后面加入了一个渐变后，须要清除最后一个li的。

这里面使用了.nav li:last-child:after的伪类，将其宽高设置为0。

结果：

通过对伪类的使用，非常easy的制作了导航中常常碰到的问题。

案例中，还有css3中的transition动画的使用。transform变形。background:linear-gradient();渐变的设置。

css3中关于伪类的使用的更多相关文章

  1. ::before ::after CSS3中的伪类和伪元素

    ::before和::after伪元素的用法 一.介绍 css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类——:hover,:link,:active,:target,:not(),:fo ...

  2. CSS3中的伪类选择器详解

      类选择器和伪类选择器区别 类选择器我们可以随意起名,而伪类选择器是CSS中已经定义好的选择器,不可以随意起名. 伪类选择器以及伪元素 我们把它放到这里 p.aaas{ text-align: le ...

  3. css3中的伪类选择器

    一.动态伪类 动态伪类,因为这些伪类并不存在于HTML中,而只有当用户和网站交互的时候才能体现出来,动态伪类包含两种,第一种是我们在链接中常看到的锚点伪类,如":link",&qu ...

  4. CSS3中结构伪类选择器——root、not、empty、target选择器

    1.root选择器 将样式绑定到页面的根元素中.根元素是指位于文档树中最顶层结构的元素,在HTML页面中就是指包含整个页面的<html>部分. <style type="t ...

  5. CSS3中only-child伪类选择器

    <body> <style type="text/css"> //只对li1设置样式 li:nth-child(1):nth-last-child(1){ ...

  6. CSS和CSS3中的伪元素和伪类（总结）

    好多人伪类和伪元素分清楚,其实就是一句话,“伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到”. CSS中伪类包括: :first-child :lang ...

  7. CSS中的伪类与伪元素

    在前端开发中,大家或多或少的有接触过CSS伪类和伪元素,使用伪元素的时候,总感觉和伪类很相似,但又不能详细的说出两者的区别和联系,那么两者到底有什么区别和联系呢? 在 W3C 中定义: 伪类:用于向某 ...

  8. css3学习之--伪类与圆角

    随着css3.0的发布到逐渐完善,目前已经大部分浏览器已经能较好地适配,所以写一些css3的学习经历,分享心得,主要以案例讲解为主,话不多说,今天以css3的新增的“圆角”属性来讲解,基于web画一个 ...

  9. CSS3的一个伪类选择器:nth-child()

    CSS3的一个伪类选择器“:nth-child()”. Table表格奇偶数行定义样式: 语法: :nth-child(an+b) 为什么选择她,因为我认为,这个选择器是最多学问的一个了.很可惜,据我 ...

随机推荐

  1. C# Hook

    C# Hook原理及EasyHook简易教程 前言 在说C# Hook之前,我们先来说说什么是Hook技术.相信大家都接触过外挂,不管是修改游戏客户端的也好,盗取密码的也罢,它们都是如何实现的呢? 实 ...

  2. Python开源爬虫项目代码：抓取淘宝、京东、QQ、知网数据--转

    数据来源:数据挖掘入门与实战  公众号: datadw scrapy_jingdong[9]- 京东爬虫.基于scrapy的京东网站爬虫,保存格式为csv.[9]: https://github.co ...

  3. 关于网易云音乐爬虫的api接口？

    抓包能力有限,分析了一下网易云音乐的一些api接口,但是关于它很多post请求都是加了密,没有弄太明白.之前在知乎看到过一个豆瓣工程师写的教程,但是被投诉删掉了,请问有网友fork了的吗?因为我觉得他 ...

  4. asp.net网页播放MP4 出错

    通过IIS进行添加:单击[开始]→[程序]→[管理工具]→[IIS管 理器],逐步展开“本地计算机”.“网站”,在你的网站上右击,选择[属性],单击“HTTP头”选项卡→单击“MIME类型”按钮,再单 ...

  5. WLAN HAL

      WLAN HAL WLAN 框架具有三个 WLAN HAL 表面,分别由三个不同的 HIDL 软件包表示: 供应商 HAL:Android 专用命令的 HAL 表面.HIDL 文件位于 hardw ...

  6. 如何使用Java创建Excel(.xls 和 .xlsx)文件 并写入数据

    1,需要依赖的jar包, <!-- POI(operate excel) start --> <!-- the version of the following POI packag ...

  7. 玩具（toy）

    题目 试题2:玩具(toy) 源代码:toy.cpp 输入文件:toy.in 输出文件:toy.out 时间限制:1s 空间限制:256MB 题目描述 商店正在出售小C最喜欢的系列玩具,在接下来的n周 ...

  8. select &amp; epoll

    同步.异步.堵塞和非堵塞差别 同步:发出一个功能调用时.在没有得到结果之前,该调用就不返回 异步:当一个异步过程调用发出后.调用者不能立马得到结果.实际处理这个调用的部件在完毕后.通过状态.通知和回调 ...

  9. 第五章，AsyncTask和ProgressBar的练习（Android）

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools=&q ...

  10. iOS开发之软键盘使用小技巧

    在iOS开发过程中,有时候须要弹出软键盘进行输入,有时候又须要在某些情况下隐藏软键盘,以提高用户体验. 今天有几个关于软键盘的小技巧和大家分享. (1)仅仅弹出数字键盘 有某些需求中,要求用户仅仅能在 ...