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 相关文章推荐
js直接编辑当前cookie的脚本
Sep 14 Javascript
JavaScript 动态将数字金额转化为中文大写金额
May 14 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
Oct 21 Javascript
angularjs点击图片放大实现上传图片预览
Feb 24 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
May 17 Javascript
初探js和简单隐藏效果的实例
Nov 23 Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
Dec 24 Javascript
原生JS进行前后端同构
Apr 22 Javascript
Vue批量图片显示时遇到的路径被解析问题
Mar 28 Javascript
详释JavaScript执行环境与执行栈
Apr 02 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
Jul 13 Javascript
js实现弹幕飞机效果
Aug 27 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 存取 MySQL 数据库的一个例子
2006/10/09 PHP
Yii2增删改查之查询 where参数详细介绍
2016/08/08 PHP
详解PHP中array_rand函数的使用方法
2016/09/11 PHP
php实现的表单验证类完整示例
2019/08/13 PHP
php面向对象基础详解【星际争霸游戏案例】
2020/01/23 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
使用prototype.js进行异步操作
2007/02/07 Javascript
神奇的代码 通杀各种网站-可随意修改复制页面内容
2008/07/17 Javascript
jquery下操作HTML控件的实现代码
2010/01/12 Javascript
通过一段代码简单说js中的this的使用
2013/07/23 Javascript
javascript loadScript异步加载脚本示例讲解
2013/11/14 Javascript
jQuery制作拼图小游戏
2015/01/12 Javascript
js css实现垂直方向自适应的三角提示菜单
2016/06/26 Javascript
浅谈js的html元素的父节点,子节点
2016/08/06 Javascript
详解如何较好的使用js
2016/12/16 Javascript
DropDownList控件绑定数据源的三种方法
2016/12/24 Javascript
JavaScript事件发布/订阅模式原理与用法分析
2018/08/21 Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
2018/09/13 Javascript
浅谈Fetch 数据交互方式
2018/12/20 Javascript
使用layui 的layedit定义自己的toolbar方法
2019/09/18 Javascript
js实现圆形菜单选择器
2020/12/03 Javascript
Python实现对百度云的文件上传(实例讲解)
2017/10/21 Python
高质量Python代码编写的5个优化技巧
2017/11/16 Python
python用fsolve、leastsq对非线性方程组求解
2018/12/15 Python
python适合人工智能的理由和优势
2019/06/28 Python
Python 使用matplotlib模块模拟掷骰子
2019/08/08 Python
Python 函数list&amp;read&amp;seek详解
2019/08/28 Python
Java文件与类动手动脑实例详解
2019/11/10 Python
css3实现多个元素依次显示效果
2017/12/12 HTML / CSS
HelloFresh澳大利亚:订购你的美味食品盒、健康餐食
2018/03/28 全球购物
中介公司区域经理岗位职责范本
2014/03/02 职场文书
小学生竞选班长演讲稿
2014/04/24 职场文书
伊琍体标语
2014/06/25 职场文书
毕业生个人总结
2015/02/28 职场文书
感恩教育主题班会
2015/08/12 职场文书
MySQL中order by的使用详情
2021/11/17 MySQL