控制导航条最后一个标签样式的三种方法分析

无情 阅读:245 2020-02-19 12:01:54 评论:0

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>控制导航条最后一个标签样式的三种方法</title>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.1.min.js"></script>
<style>
.nav{width: 1200px; height: auto; overflow: hidden; background-color: cornflowerblue; margin: 0 auto;}
.nav a{ width: 19.8%; line-height: 50px; float: left; color: #fff; text-align: center; border-right:2px solid #fff ;}
/*.last{ border-right: none !important;}*/
</style>
</head>
<body>
<!--
方法一:将样式直接写在最后一个标签内,行内或行外。
方法二:用jquery方法获取最后一个标签并且改变其样式。
方法三:用js方法获取最后一个标签并赋予其样式。
-->
<div class="nav" id="nav">
<a href="">导航</a>
<a href="">导航</a>
<a href="">导航</a>
<a href="">导航</a>
<a href="" class="last">导航 end</a>
</div>
<script type="text/javascript">

/*jquery 控制控制最后一个标签的方法
$(function(){
$(".nav a").last().css("border-right","none");
});
*/

/*js 控制控制最后一个标签的方法*/
var getnav = document.getElementById('nav').getElementsByTagName('a');
//alert(getnav.length);
getnav[getnav.length -1].style.borderRight = "none";


</script>
</body>
</html>

标签:CSS
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
排行榜
关注我们

扫一扫关注我们,了解最新精彩内容