css3中关于伪类的使用

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

目标：

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;

		}