Question

我正试图找出一种方法来使用CSS选择器来隔离div的特定子项。

我希望选择器仅适用于嵌套在input内而非#section1内的#section2。

<div class="section" id="section1">
    <div class="section" id="section2">
        <input type="text">
    </div>
    <input type="text">
</div>

这是一个简化的例子，但这里有一些值得注意的事情：

div是唯一可识别的，但有一个共同的类
两个input在各个方面完全相同（除了它们的位置），但每个div.section只有唯一的input s，它们不会嵌套在其他div.section中div.section 1}}Š
input :nth-child(n)的位置可能会发生变化，这意味着它可能会在嵌套div之前或之后出现相同的输入（排除:nth-of-type(n)或{{1} }）但它仍然在级别
出于格式化原因，所有这些代码中包含其他div一堆乱七八糟
我没有编写代码而我无法更改代码

如果它是相关的，我正在使用WebdriverIO与页面进行交互，但它除了CSS选择器之外不包含很多其他内容来查找DOM上的元素（除了链接文本，这不是很这里很有用。）

如果我能更多地澄清情景，请告诉我。我找不到任何与此相似的问题（大多数是造型，可以通过覆盖嵌套的样式来解决）但如果我错过了某些内容，请告诉我。

编辑：一个更准确的例子（复杂的混乱和额外的输入）看起来更像是......

<div class="section" id="section1">
    <div>
        <div class="section" id="section2">
            <input type="text" class="input1">
            <input type="text">
        </div>
    </div>
    <div>
        <div>
            <div class="section" id="section3">
                <input type="text">
                ...
            </div>
        </div>
    </div>
    <div>
        <input type="text" class="input1">
        ...
    </div>
</div>
<div class="section" id="section4">
    ...
</div>

在此示例中，input.input1都是#seciont1的子项，但我希望它们与最近的父div.section相关联。因此，第一个出现的与#section2相关联，第二个与#section1相关联。

因此，必然会有嵌套或包围任何部分的无关代码，但它对于重要的东西是可区分的。我只是不能使用子选择器>，因为它不是直接的孩子。

还可以使用更多输入以任何方式嵌套更多div.section个，但每个input中只有唯一div.section个未嵌套的div.section不同的input。

我也没有用它来造型，所以我不能用第二个选择器覆盖。我需要一个选择器来唯一地标识正确的div.section，并且它与其最近的父&。

Answer 1

#section1 > input { }

>是子选择器。它只选择那些元素的直接子元素。它不会进一步向树下移动。

Answer 2

你可以做这样的事情

.section > #section1 input {
border: 2px solid red;
}

.section > #section1 > #section2 input {
    border: 2px solid green;
}

这种方式有一支笔 https://codepen.io/KamilNaja/pen/JJKKZx 第二种方式是使用＆＃34;不是＆＃34; pseudoselector。

Answer 3

编辑：我不确定您是否会使用一个魔术选择器来覆盖所有情况。（但JavaScript可能会这样做。）你真正要做的是根据其父母之一（或祖父母，或曾祖父母，或其他）选择input。但是这个在CSS 中是不可能的。

请参阅：Is there a CSS parent selector?

但是，您可以通过一些聪明的选择器组合获得您想要的东西。您可以混合搭配的有用选项：

# ID选择器
>直接子选择器
:nth-child / :nth-of-type选择器
:not选择器
+兄弟选择器。

以下是一些示例案例，其中不是父级input div的.section是从具有特定ID的父级中挑选出来的，该ID也具有.section类。

＆＃13;

#section1 div + div + div > input {
  border: 2px solid red;
}

#section4 div + div:not(:last-child) input {
  border: 2px solid blue;
}

#section7 > div:first-child input {
  border: 2px solid gold;
}


/* appearance only */

#section4, #section7 {
  margin-top: 10xp;
  border-top: 2px solid gray;
}

＆＃13;

<div class="section" id="section1">
  <div>
    <div class="section" id="section2">
      <input type="text" class="input1">
      <input type="text">
    </div>
  </div>
  <div>
    <div>
      <div class="section" id="section3">
        <input type="text">
        <div>more stuff...</div>
      </div>
    </div>
  </div>
  <div>
    <input type="text" class="input1">
    <div>more stuff...</div>
  </div>
</div>

<div class="section" id="section4">
  <div>
    <div class="section" id="section5">
      <input type="text" class="input1">
      <input type="text">
    </div>
  </div>
  <div>
    <input type="text" class="input1">
    <div>more stuff...</div>
  </div>
  <div>
    <div>
      <div class="section" id="section6">
        <input type="text">
        <div>more stuff...</div>
      </div>
    </div>
  </div>
</div>

<div class="section" id="section7">
  <div>
    <input type="text" class="input1">
    <div>more stuff...</div>
  </div>
  <div>
    <div class="section" id="section8">
      <input type="text" class="input1">
      <input type="text">
    </div>
  </div>
  <div>
    <div>
      <div class="section" id="section9">
        <input type="text">
        <div>more stuff...</div>
      </div>
    </div>
  </div>
</div>

＆＃13;

这里明显的缺点是你必须为每个输入做一个规则，或至少你需要匹配的每个模式。这对你来说多么烦人，最终将取决于你必须涵盖的模式数量。但它可能有这样或那样的方式。

Answer 4

你提出问题的方式使它成为一个不可能的问题。正如您从其他答案中已经知道的那样，awk '{sub(/123\\/,"")}1' file Col1 Col2 abc abc abcd abcd是直接子选择器。

由于嵌套在>中的元素也嵌套在#section2中，因此选择器会捕获两者，除非您指定使用直接子选择器。

如果你不能做出任何其他假设，我认为没有出路。您可以在CSS选择器链的任何级别使用#section1选择器，如果您可以找到一些排序，将您感兴趣的部分放在相对于嵌套的特定顺序中。

通过特定类

4 个答案: