css选择器的区别？

Question

这两个css选择器之间有什么区别，因为它们都给我相同的效果然后使用＆＃39;＆gt;＆＃39;

1. .abc＆gt; P
2. .xyz p
＆＃13;
＆＃13;
.abc > p {
    background-color: yellow;
}

.xyz p {
    background-color: red;
}
＆＃13;
<h1>Welcome to My Homepage</h1>

<div class="abc">
    <p>I live in Duckburg.</p>
    <h2>My name is Donald</h2>
    <p>I live in Duckburg.</p>
    <p>I live in Duckburg.</p>
    <p>I live in Duckburg.</p>
</div>

<p>My best friend is Mickey.</p>

<p>I will not be styled.</p>

<div class="xyz">
    <p>I live in Duckburg.</p>
    <h2>My name is Donald</h2>
    <p>I live in Duckburg.</p>
    <p>I live in Duckburg.</p>
    <p>I live in Duckburg.</p>
</div>
＆＃13;
＆＃13;
＆＃13;

Answer 1

使用O(n)将适用于.abc > p {}的直接后代的所有p元素：

.abc

使用<div class="abc"> <p>I'm affected</p> <div class="test"> <p>I'm not</p> </div> </div> 适用于.xyz p {}内的所有p元素，无论它们是直系后代，孙子孙女，曾孙子等等：

.xyz

Answer 2

div p

Selects all <p> elements inside <div> elements  

div＆gt; p

Selects all <p> elements where the parent is a <div> 

Answer 3

在您的案例AppointmentType.Completed中，>符号定位特定部分的所有直接子项。没有它，该风格也适用于该类的任何子孩子。