如何取同一个选择器的一个元素？答案

【问题标题】：how to take one element of the same selector?如何取同一个选择器的一个元素？
【发布时间】：2021-03-30 06:24:05
【问题描述】：

所以我有一些像这样的 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> 的元素并为其着色？我找不到只取一个元素的方法，因为所有函数都指“每个”和“所有”。有人能告诉我怎么做吗？谢谢

【问题讨论】：

你有什么条件可以上色或不上色？
我无法更改 HTML 文件中的任何内容，我只能在 CSS 文件中做所有事情
document.querySelectorAll('h2')[0].style.color="red"; document.querySelector('h2').style.color="red";

标签： html css html-select

【解决方案1】：

: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>

【讨论】：

【解决方案2】：

querySelector() 方法返回与文档中指定的 CSS 选择器匹配的第一个元素。

编辑：

你可以这样做：

<script>
    var l = document.querySelectorAll('h2');
    l[0].style.color="red";
    l[1].style.color="green";
</script>

编辑 2：

我们可以将 CSS 选择器分为几类：

简单的选择器（根据名称、id、类选择元素）
组合选择器（根据特定的它们之间的关系）
伪类选择器（根据某种状态选择元素）
伪元素选择器（选择元素的一部分并设置样式）
属性选择器（根据属性选择元素或属性值）

最终实现仅使用选择器使得无法通过分层不相关的 HTML 元素导航。

如果可能包含脚本文件而不是使用它。

相关question and answers

【讨论】：

这会将颜色应用于 all h2 标签，这不是 OP 想要的。
@SidPro 它不起作用。 <h2>2</h2>、<h2>3</h2> 和`
4
` 将获得相同的颜色。我确实写过他们有相同的Selector。如果它们不同，您的功能将起作用
@SidPro 这甚至不在 CSS 文件中。我无法更改 Html 文件。这就是我得到的规则

【解决方案3】：

有一些答案here 依赖于 JS/JQuery。

但是（为了避免 JS）你也可以像这样向元素添加 class 属性：

<h2 class="element-to-color">1</h2>

并像这样在 CSS 中选择它：

.element-to-color {
  color: blue;  /* or some other color */
}

【讨论】：

很遗憾，我做不到。我无法更改 Html 文件中的任何内容
那么 HTML 将不得不以 some 的方式进行更改。你能澄清一下限制是什么吗？您要么必须附加 CSS 或 JS - 两者都会修改 HTML..
限制是我不能更改 html 文件并且我只有一个空的 CSS 文件。而已。任务是给<h2>1</h2>上色。