WordPress CSS样式问题：如何选择列表中的前两个li元素？

嘿，我来帮你搞定这个CSS选择器的问题！针对你给出的HTML结构，要选中<ul class="smooth">里的前两个<li>（也就是data-id为{featured}和{featured2}的那两个），这里有几种实用的方法，你可以根据场景选择：

方法1：使用:nth-child()选择器（按顺序选中） #

这是最直接的方式，通过元素在父容器中的位置来选择，适合固定顺序的场景：

单独选中前两个元素 #

/* 选中第1个li */
ul.smooth li:nth-child(1) {
  background-color: #f5f5f5; /* 示例样式：设置背景色 */
}

/* 选中第2个li */
ul.smooth li:nth-child(2) {
  border-left: 3px solid #2196F3; /* 示例样式：左侧蓝色边框 */
}

同时选中前两个元素 #

如果两个元素需要相同的样式，可以用-n+2简化写法，n从0开始计算，结果会匹配第1和第2个元素：

ul.smooth li:nth-child(-n+2) {
  padding: 8px 12px; /* 示例样式：内边距 */
  margin-bottom: 6px; /* 示例样式：底部外边距 */
}

方法2：利用data-id属性精准选择（不受顺序影响） #

如果这两个<li>的data-id值是固定的，用属性选择器更靠谱——就算后续列表顺序调整，样式也不会失效：

/* 选中data-id为{featured}的li */
ul.smooth li[data-id="{featured}"] {
  color: #E91E63; /* 示例样式：文字颜色 */
}

/* 选中data-id为{featured2}的li */
ul.smooth li[data-id="{featured2}"] {
  font-weight: 600; /* 示例样式：加粗文字 */
}

注意：如果实际HTML中data-id的值没有大括号（比如是featured而不是{featured}），记得去掉代码里的大括号哦。

方法3：结合父元素限制作用范围（避免全局影响） #

在WordPress中，为了防止样式影响其他页面的列表元素，建议加上父容器的选择器，让样式只作用于目标区域：

.categories-wrp[data-type="cliparts"] ul.smooth li:nth-child(-n+2) {
  /* 这里写你的样式 */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

小提示 #

在WordPress中添加自定义CSS的方式：

• 进入后台「外观」→「自定义」→「额外CSS」，粘贴代码即可；
• 或者使用子主题的style.css文件（更推荐，避免主题更新丢失样式）；
• 更改后记得清除浏览器缓存，才能看到最新效果~

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