为带有second类的<li>元素设置margin-left无效的技术求助

首先你的问题出在Vue动态class的语法错误，导致second类根本没被正确添加到<li>元素上，所以你的CSS选择器找不到目标元素，样式自然不生效。

看你原代码里的class绑定：

<li :class="second category == 1095 ? 'child' : ''" ;="">

这里的second会被Vue当成一个变量解析，而不是静态类名。正确的写法应该把静态类和动态类结合，用数组语法：

<li :class="['second', category == 1095 ? 'child' : '']">
    <a class="child post_no" data-value="3" @click="total += parseInt($el.dataset.value); filterPosts(1095)">Threat Detection, Investigation, and Response (3)</a>
</li>

或者用更简洁的对象语法：

<li :class="{ second: true, child: category == 1095 }">
    <!-- 内容不变 -->
</li>

修正后，你的原有CSS代码li.second { margin-top: 0; margin-left: 10px; }就能正常生效了。

如果还是没效果，打开浏览器开发者工具（F12）排查：

• 检查<li>元素的类列表，确认second类已经存在
• 查看该元素的样式面板，看是否有其他优先级更高的CSS规则覆盖了你的margin-left（比如带ID的选择器、嵌套更深的选择器），如果是，可适当提高选择器优先级，比如写成.parent-container li.second（替换成实际的父元素类名），尽量避免用!important

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