<!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>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
