Html 在ul中找到一个li并进行比较

我得到了这个标记，我需要在给定的

ul

中找到一个

li

，它的

数据秩

大于其余的数，并对它做一些不同的处理，但只对与其兄弟姐妹相关的

li

有没有一种聪明的方法可以用普通的css或者样式化的组件来实现这一点

<ul>
  <li data-rank='1'>Person1
    <ul>More li here</ul>
  </li>
    
  <li data-rank='1'>
    Person2
    <ul>More li here</ul>
  </li>

  <!-- I want to style this li because its siblings have a different number -->
  <li data-rank='2'>
    Person3
    <ul>More li here</ul>
  </li>

  <li data-rank='1'>
    Person4
    <ul>More li here</ul>
  </li>
</ul>

个人1
这里有更多li


人2
这里有更多li


人3
这里有更多li


人4
这里有更多li

使用n-child（），您也可以给它类，甚至id，但在这种情况下，您需要n个child；第n个孩子（3）将第三个ul li涂成红色。我只是向您展示了一个示例，然后根据您的需要对其进行定制。使用现代css，您可以通过其属性点击一个

html

标记，如下所示：

li[data rank=“2”]{margin:50px；}

个人1
这里有更多li


人2
这里有更多li


人3
这里有更多li


人4
这里有更多li

JavaScript很容易做到这一点不，CSS本身无法确定哪些数据等级值最高。是的，但这是硬编码的，我需要成为与其他数字相关的任何数字JavaScript。您可能需要添加标记并编辑问题

ul li:nth-child(3){
    color: red;
}