
如何仅用CSS选择无属性HTML标签?
前端开发中,我们经常需要为HTML标签设置样式。但有时需要选中没有任何属性(如class、id、href等)的标签。本文介绍如何纯CSS实现,无需JavaScript。
假设HTML代码如下:
立即学习“前端免费学习笔记(深入)”;
其中<p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/1453" title="Cutout.Pro"><img
src="https://img.php.cn/upload/ai_manual/001/431/639/68b6cc9153f6b201.png" alt="Cutout.Pro" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/1453" title="Cutout.Pro">Cutout.Pro</a>
<p>AI驱动的视觉设计平台</p>
</div>
<a href="/ai/1453" title="Cutout.Pro" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</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;
}
需要注意的是,此方法需要枚举所有可能出现的属性,如果标签可能包含许多属性,则方法会变得冗长且难以维护。实际应用中,最好为需要样式化的元素添加类名,然后通过类名选择样式,这更清晰易维护。










