假設我有這個 html：
<div class="wrapper">
<p>testOne</p>
<p>testTwo</p>
<p>testThree</p>
</div>
如果我想申請 p 標簽設計，我可以去 CSS 并使用：
1)
.wrapper > * {
color: red;
}
或者
2)
.wrapper {
color: red;
}
他們都作業得很好，那么，有什么區別？我曾經聽說第一個示例僅將設計應用于“包裝器”的直接子代，所以我這樣做了：
<div class="wrapper">
<p>testOne</p>
<div class="container">
<p>testTwo</p>
</div>
<p>testThree</p>
</div>
所以 testTwo不是直接孩子..但他仍然得到紅色！
uj5u.com熱心網友回復：
所以 testTwo 不是直接孩子..但他仍然得到紅色！
但是， testTwo 的父級<div >具有紅色，因此它的所有子級都繼承了該樣式。這與將正文顏色設定為紅色并反映在整個檔案中的基本行為相同。
我曾經聽說第一個示例僅將設計應用于“包裝器”的直接子代
那就對了。
也許border會更好地說明選擇器之間的區別，因為孩子不會繼承它：
.wrapper > * {
border: 1px solid red;
}
.wrapper {
border: 1px solid blue;
}<div class="wrapper">
<p>testOne</p>
<div class="container">
<p>testTwoA</p>
<p>testTwoB</p>
</div>
<p>testThree</p>
</div>盡管您沒有詢問它，但也考慮背景關系.wrapper *，它會選擇所有孩子，而不管深度如何，進一步說明>：
.wrapper * {
border: 1px solid green;
}
.wrapper > * {
border: 1px solid red;
}
.wrapper {
border: 1px solid blue;
}<div class="wrapper">
<p>testOne</p>
<div class="container">
<p>testTwoA</p>
<p>testTwoB</p>
</div>
<p>testThree</p>
</div>請注意，在上面的示例中，順序很重要，因為.wrapper *和.wrapper > *不再像.wrapper現在那樣不相交.wrapper > *。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/416912.html
標籤：