css如何选择相同类名下的第一个元素

 <h1 class='c'>This is a heading</h1>
 <p class='b'>The first paragraph.</p>
 <p class='aa'>The second paragraph.</p>
 <p class='aa'>The third paragraph.</p>
 <p class='aa'>The fourth paragraph.</p>

我想选择类名为aa的第一个元素，怎么选择？ p.aa:nth-of-type(1) 好像不管用

<script>
       document.getElementsByClassName('aa')[0].style.color="blue";
   </script>

.b + .aa{...}

img

可以反着来，把类名为aa的不是第一个元素的属性设置回inherit
代码如下：（如有帮助，望采纳！谢谢! 点击我这个回答右上方的【采纳】按钮）

<style type="text/css">
.aa {
    color: red;
}
.aa ~ .aa {
    color: inherit;
} 
</style>
</head>
<body>
 <h1 class='c'>This is a heading</h1>
 <p class='b'>The first paragraph.</p>
 <p class='aa'>The second paragraph.</p>
 <p class='aa'>The third paragraph.</p>
 <p class='aa'>The fourth paragraph.</p>

</body>
</html>


    <h1 class='c'>This is a heading</h1>
    <p class='b'>The first paragraph.</p>
    <p class='aa'>The second paragraph.</p>
    <p class='aa'>The third paragraph.</p>
    <p class='aa'>The fourth paragraph.</p>
   <style>
       .aa:nth-of-type(2){
           color: red;
       }
   </style>

这样是可以实现的 但是用js实现应该更通俗易懂 找到.aa的类名然后给第一个设置单独的样式