从两个父母的CSS获取所有特定的孩子

Question

我想从两个不同的父类中选择所有input[type=text]子级。

对于以下CSS，哪种方法最干净？

.secciones * input[type=text]
.subsecciones * input[type=text] {
    border: none transparent;
    background-color: white;
}

Answer 1

您应该删除通配符选择器。 您几乎从不想要它，因为它是一个非常广泛的选择器：

.secciones input[type=text],
.subsecciones input[type=text] {
    border: none transparent;
    background-color: white;
}

---

CSS从右到左被解析，因此： .secciones input[type=text] ：
-选择所有input[type=text]
-对于每个匹配过滤器：检查它是否是.secciones的（大）子.secciones

<div class="secciones">
    <div>
        <input type="text" placeholder="I will match as one of my parents is .secciones" />
    </div>
    <input type="text" placeholder="I will match as one of my parents is .secciones" />
</div>

---

如果添加通配符选择器，则基本上是说“检查input[type=text]是否是任何东西的子项。使用*作为最右边的选择器，您将从”选择所有内容 ”开始，这很多。

如果要选择器的直接子代 ，可以执行以下操作： .secciones >input[type=text] ：
-选择所有input[type=text]
-对于每个匹配过滤器：检查它是否是.secciones的直接子.secciones

<div class="secciones">
    <div>
        <input type="text" placeholder="I will NOT match, my direct parent is NOT .secciones" />
    </div>
    <input type="text" placeholder="I will match, my DIRECT parent is .secciones" />
</div>

---

一个何时使用*的示例： .hideNextElement + * ：

<div class="hideNextElement">click me to show next</div>
<div>I can be ANY element. With some JS I can become visible.</div>

Answer 2

不要使用* 。 相反，使用, 。 您应该这样做：

.secciones input[type=text],
.subsecciones input[type=text] {
    border: none transparent;
    background-color: white;
}

希望这可以帮助！

Answer 3

如果要定位.secciones和.subsecciones所有后代， .secciones可以使用后代组合器 ：

.secciones input[type=text],
.subsecciones input[type=text] {
    border: none transparent;
    background-color: white;
}

如果您只希望定位.secciones和.subsecciones的直接后代（子代）， .secciones可以使用子组合器 ：

.secciones > input[type=text],
.subsecciones > input[type=text] {
    border: none transparent;
    background-color: white;
}

您可以在MDN上阅读有关使用组合器的更多信息。