About the use of pseudo-classes in css3_html/css

About the use of pseudo-classes in css3_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:53:40

Original

1106 people have browsed it

Goal:

Use of after pseudo-class and last-child pseudo-class in css. And some css3 properties.

Process:

When making navigation, we often encounter the effect of adding a separator symbol after each li, and when the last element is reached, the separator symbol will be removed.

As shown in the picture

So how can you create such an effect easily using pure css. CSS pseudo-classes are used here.

html part

<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>

Copy after login

and then call the css style

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;		}

Copy after login

.nav li:after in css It indicates that an element is added after each li, which is the content (when making a gradient, there is no need to add content, so it is empty).

background:linear-gradient(to bottom,#f82f87,#bo363f,#f82f87) //Gradient style in css3

After adding a gradient after each li , the last li needs to be cleared.

The .nav li:last-child:after pseudo-class is used here, and its width and height are set to 0.

Result:

By using pseudo-classes, problems often encountered in navigation are easily solved.

In the case, there is also the use of transition animation in css3, transform deformation, and background:linear-gradient(); gradient settings.