在设计网页模板的时候，为了突出信息的重要性以及美观度，我们会设置一些样式使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>
效果图：
相关推荐
**JQ 徘徊轮播LI**是一种基于jQuery（JQ）实现的用户界面（UI）组件，主要用于创建一种特殊的轮播效果。这种轮播方式被称为“徘徊轮播”，其特点是能够动态追加新的LI（列表项）数据，使得轮播内容在前端持续更新，...
接下来，使用CSS为进度条添加样式，包括两种不同的样式。这里仅给出基础样式，具体设计可根据项目需求调整。 ```css .step-progress { list-style-type: none; display: flex; } .step-progress li { position:...
一个基本的JQ Tab标签页由两部分组成：导航栏（tab headers）和内容区域（tab panes）。导航栏中的每个li元素对应一个内容区域，通过添加`class="active"`可以指定默认显示的标签页。 ```html <li class="active...
在提供的代码示例中，四种方法都被用于改变每个`ul`的第一个`li`的背景色为红色。每种方法都嵌套在`$(function() {...})`中，这是一个jQuery的文档就绪（DOM ready）事件，确保在执行代码时DOM已经加载完成。 在`...
在提供的代码示例中，首先引入了jQuery库，并设置了一个带有固定定位和滚动条的div容器`.sub_menu_frame`，里面包含一个未排序的列表`<ul class="sub_menu">`，列表项`<li>`包含链接`<a>`。每个链接都与带有特定ID的...
为了美观，我们还定义了CSS样式，给`<ul>`设置背景色，并为`<li>`设置内边距和背景色。 接着，我们引入了jQuery库（版本1.6.2），用于处理页面上的DOM操作。然后，我们定义了一个JavaScript函数，该函数在页面加载...
在网页开发中，分页和选项卡是两个非常常见的组件，它们极大地提升了用户体验，使得大量数据的展示变得井然有序，同时也便于用户导航和操作。本篇将详细讲解"jq分页控件"以及与之相关的jQuery选项卡功能。 首先，...
"jq+css3弹动下拉菜单 jquery+css3弹动渐变下拉菜单代码下载.zip" 提供的资源正是这样一个结合了jQuery和CSS3技术的动态效果下拉菜单。这个压缩包中的代码可以帮助开发者实现一个既美观又有动态反馈的菜单，提升用户...
3. **隐藏与显示**：利用display属性，可以轻松控制下拉菜单的可见性，如设置为none（隐藏）或block（显示）。 4. **过渡和动画**：使用transition和animation属性，实现平滑的视觉效果。 5. **响应式设计**：考虑...
标题中的“Jquery的hover方法让鼠标经过li时背景变色”是指在使用JavaScript库jQuery时，通过调用hover方法来实现当鼠标悬停在HTML列表元素`<li>`上时，改变其背景颜色的效果。这个功能在创建交互式用户界面时非常...
接着，我们为窗帘导航设置基本样式和过渡效果。这里，我们可以使用CSS3的`transform`属性来实现窗帘展开的动作，同时设置`transition`属性来定义动画的平滑度。例如： ```css #curtain-nav { display: flex; ...
本篇文章将深入探讨该插件的使用方法、核心功能以及如何在实际项目中实现这两种切换形式。 ### 一、基本概念 1. **jQuery**：jQuery 是一个高效、简洁且易用的JavaScript库，简化了HTML文档遍历、事件处理、动画...
这种菜单利用了JavaScript库jQuery的动态效果和CSS3的样式功能，为用户提供了一种优雅的方式来浏览网站的多层次内容。 在jQuery中，`$(document).ready()`函数通常用于确保DOM（文档对象模型）加载完成后再执行相关...
在IT行业中，jQuery（简称JQ）是一种广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互。"JQ 自动生成目录和点击跳转固定位置"是一个常见的功能需求，尤其在长篇幅的文章或文档展示中，...
本文将深入探讨如何利用这两种技术来构建一个高效、易用的下拉菜单系统。 一、jQuery基础 jQuery是一个广泛使用的JavaScript库，简化了DOM操作、事件处理和动画效果。它的语法简洁，使得开发者能快速地实现复杂的...
好看的select下拉框（带搜索功能），由于默认select样式过丑而且有些东西还不好改,这个是利用input框和ul来实现一个下拉框的效果。分为不带搜索功能和带搜索功能两个部分。以及jquery与javascript两种实现
在本文中，我们将深入探讨这两种获取样式的方法，并通过实例来演示其应用。 首先，我们来看如何获取内联样式。内联样式是直接在HTML元素的`style`属性中定义的样式，例如： ```html ;">change color ``` 在...
在使用jQuery的`.load()`方法进行页面部分刷新时，可能会遇到一些问题，如样式丢失、页面结构混乱等。这些问题通常是由于不正确的使用方法或者对`.load()`的理解不足导致的。以下将详细介绍这些问题的原因以及如何...
这两种布局方式都可以让元素根据容器大小自动调整位置和大小。例如，使用Flexbox，可以在`.slider`上设置`display: flex`，并将`.tabs`和`.content`设置为`flex-grow: 1`，这样它们会共享可用空间。 5. **响应式...