收藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用的选择器函数</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<style>
.main h2{line-height: 30px;}
</style>
<div class="main">
<h1 id="tlite">新闻资讯</h1>
<h2>做有态度的新闻专业栏目</h2>
<ul>
<li>01:新闻列表列表列表列表新闻列表列表列表列表</li>
<li>02:新闻列表列表列表列表新闻列表列表列表列表</li>
<li>03:新闻列表列表列表列表新闻列表列表列表列表</li>
<li>04:新闻列表列表列表列表新闻列表列表列表列表</li>
<li>05:新闻列表列表列表列表新闻列表列表列表列表</li>
<li>06:新闻列表列表列表列表新闻列表列表列表列表</li>
</ul>
</div>
<script type="text/javascript">
// 1:class选择器
$('.main').css({"background-color":"#B2E0FF","width":"800","height":"500","margin":"auto"});
// 2:ID选择器
$('#tlite').css({"color":"#fff","font-size":"24px","padding-top": "40px"});
// 3:所有标题元素 <h1> - <h6>
$(":header").css({"text-align":"center","font-weight": "normal"})
// 4:所有 <li> 元素
$("li").css({"list-style-type":"none","line-height": "30px"})
// 5:第一个<li> 元素
$("li:first").css("color","#F44336")
// 6:最后一个<li> 元素
$("li:last").css("color","#F44336")
// 7:所有偶数<li> 元素
$("li:even").css("background-color","#fff")
//8:标签选择器
$("h2").css({"font-size": "16px","color": "grey"})
</script>
</body>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
