如何使用jQuery定位第二个.footer-info-list类实例中的Link 4并设置样式？

要实现这个需求，我们可以通过jQuery的选择器精准定位目标元素，再为它添加样式，下面是具体的实现方法：

1. 精准定位目标元素 #

首先，我们需要选中第二个.footer-info-list，然后在里面找到文本为"Link 4"的<a>标签。这里可以用以下几种选择器组合：

方法一：使用:eq()索引选择器 #

:eq()可以选中指定索引的元素（索引从0开始），所以第二个.footer-info-list的索引是1：

// 定位到目标元素
const targetLink = $('.footer-info-list:eq(1) a:contains("Link 4")');

方法二：使用.eq()方法 #

也可以先选中所有.footer-info-list，再用.eq()方法筛选出第二个：

const targetLink = $('.footer-info-list').eq(1).find('a:contains("Link 4")');

注意：:contains()选择器是区分大小写的，如果你的文本有大小写差异，需要注意匹配一致性。

2. 为目标元素设置样式 #

定位到元素后，就可以用jQuery的方法来设置样式了，常用的有两种方式：

方式一：直接用.css()方法设置行内样式 #

如果只是简单的样式，可以直接通过.css()添加：

targetLink.css({
    'color': '#ff0000',
    'font-weight': 'bold',
    'text-decoration': 'underline'
});

方式二：添加CSS类（推荐） #

如果样式比较复杂，或者需要复用，建议定义一个CSS类，然后用.addClass()添加：

/* 先在样式表中定义类 */
.highlight-link {
    color: #ff0000;
    font-weight: bold;
    text-decoration: underline;
}

// 给目标元素添加类
targetLink.addClass('highlight-link');

这样就能精准地给第二个.footer-info-list里的"Link 4"设置样式啦～

内容的提问来源于stack exchange，提问作者Scott C Wilson