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 相关文章推荐
extjs form textfield的隐藏方法
Dec 29 Javascript
javascript中用星号表示预录入内容的实现代码
Jan 08 Javascript
基于jquery的仿百度搜索框效果代码
Apr 11 Javascript
使用indexOf等在JavaScript的数组中进行元素查找和替换
Sep 18 Javascript
Bootstrap入门书籍之(五)导航条、分页导航
Feb 17 Javascript
AngularJS轻松实现双击排序的功能
Aug 30 Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
Jan 19 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
Sep 28 Javascript
如何编写一个d.ts文件的步骤详解
Apr 13 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
Sep 01 Javascript
JS实现简单的点赞与踩功能示例
Dec 05 Javascript
vue2配置scss的方法步骤
Jun 06 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
zen cart新进商品的随机排序修改方法
2010/09/10 PHP
24款非常有用的 jQuery 插件分享
2011/04/06 Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
2013/05/27 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
2014/10/28 Javascript
javascript实现限制上传文件大小
2015/02/06 Javascript
JavaScript事件 &quot;事件对象&quot;的注意要点
2016/01/14 Javascript
微信小程序 基础组件与导航组件详细介绍
2017/02/21 Javascript
Vuex模块化实现待办事项的状态管理
2017/03/15 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
2017/05/27 Javascript
解决Extjs下拉框不显示的问题
2017/06/21 Javascript
IntelliJ IDEA 安装vue开发插件的方法
2017/11/21 Javascript
Vue中对比scoped css和css module的区别
2018/05/17 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
2018/08/24 Javascript
JS中appendChild追加子节点无效的解决方法
2018/10/14 Javascript
javascript动态创建对象的属性详解
2018/11/07 Javascript
深入理解JS异步编程-Promise
2019/06/03 Javascript
原生js实现弹窗消息动画
2020/11/20 Javascript
Vue 简单实现前端权限控制的示例
2020/12/25 Vue.js
[01:03:41]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第三场 2月2日
2021/03/11 DOTA
python队列queue模块详解
2018/04/27 Python
django-allauth入门学习和使用详解
2019/07/03 Python
django xadmin中form_layout添加字段显示方式
2020/03/30 Python
python为什么要安装到c盘
2020/07/20 Python
python缩进长度是否统一
2020/08/02 Python
详解selenium + chromedriver 被反爬的解决方法
2020/10/28 Python
2019年c语言经典面试题目
2016/08/17 面试题
舞蹈教师自荐信
2014/01/27 职场文书
大学考试作弊检讨书
2015/05/06 职场文书
撤诉申请书法院范本
2015/05/18 职场文书
2016年党建工作简报
2015/11/26 职场文书
选对餐饮营销策略,营业额才会上涨
2019/08/27 职场文书
Redis IP地址的绑定的实现
2021/05/08 Redis
小程序wx.getUserProfile接口的具体使用
2021/06/02 Javascript
利用 JavaScript 构建命令行应用
2021/11/17 Javascript
Python制作春联的示例代码
2022/01/22 Python
使用 Docker Compose 构建复杂的多容器App
2022/04/30 Servers