Question

所以我有这种结构

<div class="about_page"> 
   <hr>
   <hr>
</div>

如何选择第二个hr标记并将其设置为不会影响第一个标记。

请注意，我无权访问代码的Html，因此我无法在代码中添加任何id或类选择器。我也没有权限为代码编写任何javascript。我想使用纯css

Answer 1

您可以使用:nth-child() Selector。

在你的情况下：

.about_page hr:nth-child(2) {

    /* your style here */

}

Answer 2

通过CSS，您可以查看选择器~(difference with child and sibling selectors)和initial或unset值

https://www.quirksmode.org/css/cascading/values.html

inherit，initial和unset关键字是您可以为任何CSS属性提供的特殊值。

下面的示例是将border-color值更改为容器中遇到的第二个小时，任何内容都可以位于第一个，第二个小时和其他小时之间。

＆＃13;

hr:first-of-type~hr {/* reset css value after the first hr seen in the container */
  border-color: red;
}

hr:first-of-type~hr~hr {/* reset to older value any hr following the second hr from the container*/
  border-color: initial;
  /* or border-color:unset; */
}

＆＃13;

<div class="about_page">
  <hr>
  <div>something</div>
  <hr>
  <hr>
  <p>some text</p>
  <hr>
  <hr>
  <div>something</div>
  <hr>
</div>
works too with just hrs
<div class="about_page">
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
</div>

＆＃13;

如何在div标签中的许多内容中选择一个hr标签，而不包含任何类或ID

2 个答案: