在CSS中递归选择所有子元素

14 浏览
0 Comments

在CSS中递归选择所有子元素

如何递归地选择所有子元素？

div.dropdown, div.dropdown > * {
    color: red;
}

这个类只给定义的className和所有直接子元素添加类。如何以简单的方式选择所有类似的子节点：

div.dropdown, 
div.dropdown > *, 
div.dropdown > * > *, 
div.dropdown > * > * > *, 
div.dropdown > * > * > * > * {
    color: red;
}

0

3 答案

0 Comments

在CSS中，我们可以使用“子选择器”和“后代选择器”来选择HTML元素。子选择器（>）仅选择作为某个元素的直接子元素的元素，而后代选择器（空格）选择作为某个元素的子元素的所有元素。

在给定的例子中，我们有两个选择器：div.dropdown * 和 div.dropdown > * 。这两个选择器都是选择div元素下的所有子元素。然而，它们之间有一个微妙的差别。

div.dropdown * 选择div.dropdown元素下的所有子元素，不论它们是直接子元素还是后代元素。这意味着它会选择div.dropdown的直接子元素以及这些直接子元素的后代元素。

而 div.dropdown > * 选择div.dropdown元素下的所有直接子元素。它不会选择后代元素，只会选择直接子元素。

所以，问题的出现是因为我们想选择div.dropdown下的所有子元素，但我们错误地使用了后代选择器（>）而不是子选择器（空格）。

为了解决这个问题，我们应该使用 div.dropdown * 而不是 div.dropdown > * 。这样，我们就可以正确地选择div.dropdown下的所有子元素，无论它们是直接子元素还是后代元素。

0
0 Comments

CSS中的问题是如何选择所有的子元素，包括子元素的子元素，以及它们的子元素，以此类推。这个问题的出现是因为在CSS中，子选择器（child selector）只能选择直接子元素，而不能选择间接子元素。

解决这个问题的方法是使用后代选择器（descendant combinator）。后代选择器用空格（" "）表示，它将两个选择器组合在一起，使得第二个选择器选择的元素是匹配第一个选择器的祖先元素的后代元素。

在给定的示例中，CSS代码选择了所有的details元素的子元素，并将它们的左边距设为48px。具体的HTML代码如下：


  A
  A is a letter in the alphabet.




  B
  B is a letter in the alphabet.
  

    1
    1 is a number.
    

      *
      * is a character.
    

  

  

    2
    2 is a number.

以上HTML代码中，details元素的子元素包括summary元素和文本节点。使用后代选择器，CSS代码选择了所有的details元素的子元素，并将它们的左边距设为48px。

通过这种方式，我们可以选择所有的子元素，包括子元素的子元素，以及它们的子元素，以此类推。这是解决这个问题的方法。

0
0 Comments

CSS中的问题：选择所有子元素。

在CSS中，可以使用空白字符匹配元素的所有后代元素。例如，`div.dropdown *`会匹配`div.dropdown`元素内的所有后代元素，并将它们的颜色设置为红色。这个选择器会匹配子元素、孙子元素以及更深层次的后代元素。

但是，使用这种选择器可能会覆盖其他具有更高优先级的类。解决方法之一是在属性值后面添加`!important`，例如`color: red !important;`，但这样做可能会使代码显得不太美观。另一种解决方法是使用更精确的选择器。

如果只想选择具有特定类的所有子元素，可以尝试使用类选择器，例如`.childWithClass`。

关于使用悬停状态的问题，可以尝试使用`div.dropdown *:hover`选择器，但有时可能会出现问题。可以尝试使用更具体的选择器来解决，例如`p .childWithClass`。

通过良好的CSS结构和继承，可以解决这些问题。

0