如何用纯CSS选择没有属性的HTML标签？

如何仅用CSS选择无属性HTML标签？

前端开发中，我们经常需要为HTML标签设置样式。但有时需要选中没有任何属性（如class、id、href等）的标签。本文介绍如何纯CSS实现，无需JavaScript。

假设HTML代码如下：

立即学习“前端免费学习笔记（深入）”；

其中<p></p> <div class="aritcle_card"> <a class="aritcle_card_img" href="/ai/1593"> <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680267394551.png" alt="标小兔AI写标书"> </a> <div class="aritcle_card_info"> <a href="/ai/1593">标小兔AI写标书</a> <p>一款专业的标书AI代写平台，提供专业AI标书代写服务，安全、稳定、速度快，可满足各类招投标需求，标小兔，写标书，快如兔。</p> <div class=""> <img src="/static/images/card_xiazai.png" alt="标小兔AI写标书"> <span>40</span> </div> </div> <a href="/ai/1593" class="aritcle_card_btn"> <span>查看详情</span> <img src="/static/images/cardxiayige-3.png" alt="标小兔AI写标书"> </a> </div> 标签无属性，<img alt="如何用纯CSS选择没有属性的HTML标签？" >标签有src属性。如何仅修改无属性的<p></p>标签样式？

我们可以结合CSS的:not()伪类和属性选择器。:not()伪类排除特定选择器匹配的元素；[attribute]选择器匹配具有指定属性的元素。组合使用，即可选择不包含任何特定属性的元素。

要将无属性<p></p>标签字体大小设为26px，CSS代码如下：

p:not([class]):not([id]):not([style]):not([title]):not([href]) {
  font-size: 26px;
}

这段代码选择所有不包含class、id、style、title和href属性的<p></p>标签。 需要考虑所有可能出现的属性。

对于<p></p>标签的例子，更简洁的方案是：

p:not([class]):not([id]):not([style]):not([title]) {
  font-size: 26px;
}

如果只关心<a></a>标签，且只需排除href和class属性：

a:not([href]):not([class]) {
  font-size: 26px;
}

需要注意的是，此方法需要枚举所有可能出现的属性，如果标签可能包含许多属性，则方法会变得冗长且难以维护。实际应用中，最好为需要样式化的元素添加类名，然后通过类名选择样式，这更清晰易维护。

以上就是如何用纯CSS选择没有属性的HTML标签？的详细内容，更多请关注php中文网其它相关文章！