如何选择首个无属性的span元素（排除末尾无属性元素）

嘿，针对你给出的HTML结构，要精准挑出第一个不带任何属性的<span>，同时避开最后那个无属性的<span>，我给你分两种场景整理了方案，看你用哪种技术：

方案1：纯CSS（适配你的特定结构） #

如果你的HTML结构比较固定——第一个无属性span紧跟在带属性的span后面，最后那个无属性span是父元素的最后一个子元素——那用组合选择器就能搞定：

/* 精准命中目标：紧跟带class的span、无任何属性、还不是最后一个子元素 */
span[class] + span:not([class]):not([attribute]):not(:last-child) {
  /* 给你整个红框方便看效果 */
  outline: 2px solid red;
}

为啥这么写？ #

• span[class] + span: 先锁定紧跟在带class的span后面的兄弟span；
• :not([class]):not([attribute]): 把带class或那个自定义attribute的span都过滤掉，只留光秃秃的无属性span；
• :not(:last-child): 直接排除掉父元素最后一个子元素，也就是你不想选的那个末尾span。

要是你需要更通用的（比如要适配所有可能的属性，不只是class和attribute），纯CSS就有点局限了，因为CSS没有直接匹配“完全无属性”的选择器，这时候用JS会更靠谱。

方案2：JavaScript/jQuery（灵活通用，适配各种结构） #

如果你的HTML结构可能变，或者想更稳妥，用JS或者jQuery就简单多了：

jQuery版本（省事） #

// 先找出所有无属性的span，直接取第一个就行
$('span:not([class]):not([attribute])').first().css('outline', '2px solid red');

原生JS版本（不用依赖库） #

// 先筛选出所有符合条件的无属性span
const noAttrSpans = document.querySelectorAll('span:not([class]):not([attribute])');
// 要是有这样的元素，就给第一个加样式
if (noAttrSpans.length > 0) {
  noAttrSpans[0].style.outline = '2px solid red';
}

这个思路很直接： #

先把所有不带class和自定义attribute的span都捞出来，然后直接取第一个，自然就跳过了最后那个无属性的span，不管结构怎么变，只要第一个无属性span存在，就能选中它。

测试一下你的代码 #

把上面的方案用到你给的HTML里：

<div>
  <span class="one" attribute="test"></span>
  <span></span> <!-- 这个会被选中 -->
  <span class="three" attribute="test"></span>
  <span class="four" attribute="test"></span>
  <span></span> <!-- 这个会被排除 -->
</div>

绝对能精准命中你要的那个span！

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