咨询jQuery tablesorter中first、last、pagesize CSS类的定义位置

这些CSS类并非tablesorter或tablesorterPager插件自带的预定义样式，插件仅通过配置项关联你HTML中的元素类名，样式需要你自行编写定义。以下是具体操作步骤：

1. 补全完整的分页HTML结构 #

你提供的代码片段不完整，需先补全分页容器内的元素：

<div id="pager">
  <img src="/images/first.png" class="first" alt="首页">
  <img src="/images/prev.png" class="prev" alt="上一页">
  <span class="pagedisplay"></span> <!-- 插件自动填充页码信息 -->
  <img src="/images/next.png" class="next" alt="下一页">
  <img src="/images/last.png" class="last" alt="末页">
  <select class="pagesize">
    <option value="10">10条/页</option>
    <option value="20">20条/页</option>
    <option value="50">50条/页</option>
  </select>
</div>

2. 自定义CSS样式（这就是类的定义位置） #

在你的项目CSS文件（或页面<style>标签内）添加以下样式，可根据需求调整：

/* 分页按钮基础样式 */
.first, .last, .prev, .next {
  cursor: pointer;
  margin: 0 4px;
  width: 22px;
  height: 22px;
  border: none;
  background-color: transparent;
}

/* 按钮禁用状态（插件自动给不可点击按钮添加disabled类） */
.first.disabled, .last.disabled, .prev.disabled, .next.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* 每页条数选择器样式 */
.pagesize {
  padding: 3px 6px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

/* 页码显示区域样式 */
.pagedisplay {
  margin: 0 8px;
  color: #555;
  font-size: 14px;
}

3. 确认JS配置匹配 #

你当前的tablesorterPager配置已经正确关联了类名，无需修改：

tablesorterPager({
  positionFixed: false,
  container: $("#pager"),
  updateArrows: true,
  cssNext: '.next',
  cssPrev: '.prev',
  cssFirst: '.first',
  cssLast: '.last',
  cssPageDisplay: '.pagedisplay',
  cssPageSize: '.pagesize',
  cssDisabled: 'disabled',             
  cssErrorRow: 'tablesorter-errorRow'
});

只要HTML元素的class与配置中的类名一致，自定义的CSS样式就会生效。

内容的提问来源于stack exchange，提问作者edward678