具有 css 数据属性的目标 first-child

Question

我正在尝试定位 div 中的第一个 <p> 标记，该标记的数据属性为 data-item="8"

到目前为止，我试过这个：

[data-item="8"] p:first-child {
font-size: 1.8rem;
}

还有这个：

p:first-child [data-item="8"]{
font-size: 1.8rem;
}

它没有接受样式更改。不确定我是不是做错了，或者我是否遗漏了一些不起作用的东西。

HTML:

<div data-item="8">
  <h3>Test</h3>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse ut aliquid perspiciatis a aliquam repellat non ipsum necessitatibus distinctio quos molestias asperiores quis eaque, laudantium ipsam nulla adipisci quo nemo!</p>
<p>Quam soluta quis doloribus, ut cum iste cumque earum aliquam ratione! Fugiat nemo animi ut corrupti tempora, omnis nulla. Culpa a quibusdam sequi quia totam dolores magni ducimus nesciunt expedita.</p>
</div>

Answer 1

给你伙计。只是错误的 css 选择器。

https://codepen.io/jackgisel/pen/dyPxrOG

[data-item="8"] p:first-of-type {
  ...
}

具有 css 数据属性的目标 first-child

Target first-child with css data attribute

css

custom-data-attribute

pseudo-class