具有css数据属性[重复]的目标第一个子对象

Question

此问题已经在这里有了答案：

nth-of-type vs nth-child（7个答案）

关闭3分钟前。

我在尝试定位数据属性为<p>的div中的第一个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 {
  ...
}