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 相关文章推荐
Javascript中的匿名函数与封装介绍
Mar 15 Javascript
Js实现无刷新删除内容
Apr 29 Javascript
JS实现仿苹果底部任务栏菜单效果代码
Aug 28 Javascript
快速学习JavaScript的6个思维技巧
Oct 13 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
Dec 17 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
Nov 03 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
Nov 29 Javascript
Angular2 Service实现简单音乐播放器服务
Feb 24 Javascript
微信小程序 地图map实例详解
Jun 07 Javascript
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
Angular2 父子组件数据通信实例
Jun 22 Javascript
this在vue和小程序中的使用详解
Jan 28 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 htmlspecialchars加强版
2010/02/16 PHP
php中preg_match的isU代表什么意思
2015/10/01 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
多个Laravel项目如何共用migrations详解
2018/09/25 PHP
《JavaScript高级程序设计》阅读笔记(二) ECMAScript中的原始类型
2012/02/27 Javascript
如何用JavaScript动态呼叫函数(两种方式)
2013/05/03 Javascript
Jquery操作radio的简单实例
2014/01/06 Javascript
jquery实现图片左右切换的方法
2015/05/07 Javascript
Angular.js回顾ng-app和ng-model使用技巧
2016/04/26 Javascript
angular实现表单验证及提交功能
2017/02/01 Javascript
详解Javascript 中的 class、构造函数、工厂函数
2017/12/20 Javascript
Vue使用watch监听一个对象中的属性的实现方法
2019/05/10 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
2019/05/10 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
2019/05/12 Javascript
vue 对axios get pust put delete封装的实例代码
2020/01/05 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
2020/08/18 Javascript
Vue通过provide inject实现组件通信
2020/09/03 Javascript
vue3.0 上手体验
2020/09/21 Javascript
[03:17]DOTA2英雄基础教程 剧毒术士
2013/12/12 DOTA
[15:46]教你分分钟做大人——沙王
2015/03/11 DOTA
python中关于时间和日期函数的常用计算总结(time和datatime)
2013/03/08 Python
python语音识别实践之百度语音API
2018/08/30 Python
Python 循环终止语句的三种方法小结
2019/06/24 Python
你还在@微信官方?聊聊Python生成你想要的微信头像
2019/09/25 Python
python机器学习实现决策树
2019/11/11 Python
Python Tkinter Entry和Text的添加与使用详解
2020/03/04 Python
Lacoste美国官网:经典POLO衫品牌
2016/10/12 全球购物
财务主管的岗位职责
2013/12/30 职场文书
检举信的格式及范文
2014/04/04 职场文书
迎国庆演讲稿
2014/09/15 职场文书
2014年节能降耗工作总结
2014/12/11 职场文书
图书馆义工感想
2015/08/07 职场文书
会计入职心得体会
2016/01/22 职场文书
MySQL Shell的介绍以及安装
2021/04/24 MySQL
Redis实现一个账号只能登录一个设备
2022/04/19 Redis
JS前端可视化canvas动画原理及其推导实现
2022/08/05 Javascript