时间戳

首页 > 解决方案 > 如何取同一个选择器的一个元素？

html - 如何取同一个选择器的一个元素？

问题描述

所以我有一些这样的html代码：

`<body>

    <header>
        Hallo
    </header>

    <div class="A">
        <div class="B">
            <h1>First</h1>
            
            <div class="C">
                <img src="blabla.png">
                <div class="D">
                    <h2>1</h2>
                    <p>blabla</p>
                </div>
            </div>
            
            <div class="C">
                <img src="blabal.jpg">
                <div class="D">
                    <h2>2</h2>
                    <p>blabal</p>
                </div>
            </div>

        <div class="B">
            <h1>Second</h1>
            
            <div class="C">
                <img src="Blabla">
                <div class="D">
                    <h2>3</h2>
                    <p>blabla</p>
                </div>
            </div>

            <div class="C">
                <img src="blablaa.png">
                <div class="D">
                    <h2>4</h2>
                    <p>blabla</p>
                </div>
            </div>      
            
        </div>
    </div>
</body>`

我怎样才能得到它的元素<h2>1</h2>并为其着色？我找不到只取一个元素的方法，因为所有函数都指“每个”和“所有”。有人能告诉我怎么做吗？谢谢

标签： htmlcsshtml-select

解决方案

:first-child也许

.A > .B:first-child > h1:first-child  + .C h2 {
  color: red;
}
<header>
  Hallo
</header>

<div class="A">
  <div class="B">
    <h1>First</h1>

    <div class="C">
      <img src="blabla.png">
      <div class="D">
        <h2>1</h2>
        <p>blabla</p>
      </div>
    </div>

    <div class="C">
      <img src="blabal.jpg">
      <div class="D">
        <h2>2</h2>
        <p>blabal</p>
      </div>
    </div>

    <div class="B">
      <h1>Second</h1>

      <div class="C">
        <img src="Blabla">
        <div class="D">
          <h2>3</h2>
          <p>blabla</p>
        </div>
      </div>

      <div class="C">
        <img src="blablaa.png">
        <div class="D">
          <h2>4</h2>
          <p>blabla</p>
        </div>
      </div>

    </div>
  </div>
  </header>

推荐阅读