Question

我试图将自定义CSS样式应用于div块中的仅一个锚链接。

<div class="grid">
<div class="zoom">
<a href="" class="card" data-entity-type="layout" data-entity-id="3">
<a href="" class="card" data-entity-type="flex" data-entity-id="3">
<a href="" class="card" data-entity-type="slim" data-entity-id="3">
</div>
</div>

//这适用于所有链接

<style>
div.grid>.zoom>a.card {width:100px !important;display:block}
</style>

但是，我想将以上CSS应用于仅data-entity-type =“ layout”。如何实施？我不想使用first：child-nth，因为data-entity-type =“ layout”不会总是排在第一位。

Answer 1

您可以使用attribute selectors。看起来像这样：

a[data-entity-type="layout"] {
/* css here */
}

属性选择器可以是通用的也可以是特定的。

另外，请查看此帖子以获取有关属性选择器的更多信息：How do I target elements with an attribute that has any value in CSS?

有没有一种方法可以将CSS应用于数据属性？

1 个答案: