html - css 中的父元素

Question

选择器模式 E * F 和 E F 有什么区别？ E * F 和 E F 都将适当的样式应用于 E 的子级 F。考虑 HTML:

<div id= "parent">
    <div id="subparent">
        <div id="subsubparent">
            <input type="text"/>
        </div>
    </div>
</div>

和相应的CSS

#parent, #subparent{
    padding:20px;
    background:green;
    width: 400px;
    height: 400px;
}
#subparent{
    background:black;
    height:200px;
    width:200px;
}
#subsubparent{
    background: blue;
    width:100px;
    height:100px;
}
div[id="parent"] input{
    width:50px;

}

div[id="parent"] input 将适当的样式应用于 div#parent 的子级输入。我的案例 div#subparent 是 div#parent 的 child ，div#subsubparent 是 div#subparent 的 child input 是 div#subsubparent 的子元素。因此 input 是 div#parent 的子级。

在 E * F 的情况下。 E * 匹配 E 的子元素，因此 E * F mathces F 元素 的子元素>E.

Answer 1

What's a difference in selector's pattern E * F and E F?

E F 匹配任何 F，它是 E 的后代。如果 F 是 E 的子级，选择器也会匹配。

E * F 匹配任何 F，它是 E 的任何后代 (*) 的后代。如果 F 是 E 的子级，则选择器不匹配。

例子:

<div class="foo">
    <div class="bar"></div>
    <div class="baz">
         <div class="bar"></div>
    </div>
</div>

.foo .bar 匹配 .foo 中的所有 .bar 元素。

.foo * .bar 只匹配 .baz 中的 .bar 元素。

---

另一种看待它的方式: E F 也可以写成 E * F, E > F，因此 E * F 只是一个子集 E F 选择的内容。