jQuery实现为LI列表前3行设置样式的方法【2种方法】


Posted in Javascript onSeptember 04, 2016

本文实例讲述了jQuery实现为LI列表前3行设置样式的方法。分享给大家供大家参考,具体如下:

在设计网页模板的时候,为了突出信息的重要性以及美观度,我们会设置一些样式使LI文章列表的前3行加上不同的样式,例如给LI文章列表的前3行文字颜色设置红色,再例如图片列表的时候设置列表第一张图片、第二张图片等的宽和高,都可以用蓝叶分享的这两种方法为LI列表设置样式;对于懂PHP语言的设计者来说,很容易就可以实现的效果,对于不懂PHP语言的可以使用这两种方法也很轻松的实现自己想要的各种效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
#newlog li:nth-child(1) a{color:red;}
</style>
<!--
说明:上面的CSS样式设置样式名为#newlog下面的li列表中第一行的a标签文字颜色为红色;
如果要设置第二行或者第二行,修改里面的1为2或者3就行了,以此类推。
IE6-IE8 不兼容
-->
</head>
<body>
<ul id="newlog">
  <li><a href="###">阅谁问君诵,水落清香浮</a></li>
  <li><a href="###">阅谁问君诵,水落清香浮</a></li>
  <li><a href="###">阅谁问君诵,水落清香浮</a></li>
  <li><a href="###">阅谁问君诵,水落清香浮</a></li>
  <li><a href="###">阅谁问君诵,水落清香浮</a></li>
  <li><a href="###">阅谁问君诵,水落清香浮</a></li>
</ul>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $('#newlog li:eq(3) a').css('color','red');
});
//说明:这是JQ的方式给样式名为#newlog下面的li列表中第一行的a标签设置字体颜色为红色;JQ的方式中0就是第一行,如果第二行则是1,以此类推。
</script>
</body>
</html>

效果图:

jQuery实现为LI列表前3行设置样式的方法【2种方法】

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
SWFObject Flash js调用类
Jul 08 Javascript
番茄的表单验证类代码修改版
Jul 18 Javascript
javascript中的变量是传值还是传址的?
Apr 19 Javascript
js通过location.search来获取页面传来的参数
Sep 11 Javascript
使表格的标题列可左右拉伸jquery插件封装
Nov 24 Javascript
Bootstrap Table 删除和批量删除
Sep 22 Javascript
React中常见的动画实现的几种方式
Jan 10 Javascript
JQuery特殊效果和链式调用操作示例
May 13 jQuery
微信小程序使用websocket通讯的demo,含前后端代码,亲测可用
May 22 Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
Jul 18 Javascript
js微信分享接口调用详解
Jul 23 Javascript
Openlayers实现点闪烁扩散效果
Sep 24 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
Sep 04 #Javascript
jQuery实现的自动加载页面功能示例
Sep 04 #Javascript
jQuery简单实现中间浮窗效果
Sep 04 #Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
Sep 04 #Javascript
jQuery中ScrollTo用法示例
Sep 04 #Javascript
jQuery与JS加载事件用法分析
Sep 04 #Javascript
jQuery轮播图效果精简版完整示例
Sep 04 #Javascript
You might like
PHP GD 图像处理组件的常用函数总结
2010/04/28 PHP
php实现无限级分类
2014/12/24 PHP
PHP简单验证码功能机制实例详解
2019/03/27 PHP
List Installed Software Features
2007/06/11 Javascript
jQuery获取css z-index在各种浏览器中的返回值
2010/09/15 Javascript
jQuery通过Ajax返回JSON数据
2015/04/28 Javascript
jQuery的extend方法【三种】
2016/12/14 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
2017/04/02 jQuery
html中通过JS获取JSON数据并加载的方法
2017/11/30 Javascript
webpack本地开发环境无法用IP访问的解决方法
2018/03/20 Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
2018/06/19 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
2018/09/05 jQuery
JavaScript创建表格的方法
2020/04/13 Javascript
python中dir函数用法分析
2015/04/17 Python
Python中类型检查的详细介绍
2017/02/13 Python
Python win32com 操作Exce的l简单方法(必看)
2017/05/25 Python
Python实现的下载网页源码功能示例
2017/06/13 Python
python 系统调用的实例详解
2017/07/11 Python
python email smtplib模块发送邮件代码实例
2018/04/26 Python
Flask框架Flask-Login用法分析
2018/07/23 Python
基于Django框架利用Ajax实现点赞功能实例代码
2018/08/19 Python
Python3 单行多行万能正则匹配方法
2019/01/07 Python
python获取命令行参数实例方法讲解
2020/11/02 Python
利用HTML5+CSS3实现3D转换效果实例详解
2017/05/02 HTML / CSS
彪马荷兰官网:PUMA荷兰
2019/05/08 全球购物
BAILEY 44官网:美国制造的女性服装
2019/07/01 全球购物
精美的手工家居和生活用品:Nkuku
2019/11/01 全球购物
大学四年职业生涯规划书范文
2014/01/02 职场文书
应聘编辑职位自荐信范文
2014/01/05 职场文书
决心书范文
2014/03/11 职场文书
党员服务承诺书
2014/05/28 职场文书
农行心得体会
2014/09/02 职场文书
汽车机电维修工求职信
2014/09/30 职场文书
迎新生欢迎词2015
2015/07/16 职场文书
小学运动会开幕词
2016/03/04 职场文书
用Python爬虫破解滑动验证码的案例解析
2021/05/06 Python