所以,這聽起來可能很愚蠢,但是,我一直在為導航欄的無序串列項做 CSS (.nav ul li a)。但大約幾天前,我正在嘗試一些東西,看看是否有任何變化。我剛剛使用了 (a) 并將其邊框更改為無,邊框底部更改為純 1px 青色,并且可以正常作業。執行 CSS 時 (.nav ul li a) 和 (a) 之間有什么區別嗎?
uj5u.com熱心網友回復:
這是個很大的差異。
css 選擇器引擎將僅在選擇器查詢層次結構中的 acnhor 標簽上使用和應用規則,即 NAV UL LI A. 只需將應用規則應用于 li 標簽內的錨標簽,即在導航標簽內的 ul 標簽內。不碰其他任何東西
nav ul li a {
color: red;
}
<a href='#'>outside of nav</a>
<nav>
<ul>
<li><a href='#'>inside of nav</a></li>
<li><a href='#'>inside of nav</a></li>
</ul>
</nav>
<a href='#'>outside of nav</a>
另一個角度,例如清酒
nav ul li a {
color: red;
}
<a href='#'>outside of nav</a>
<nav>
<ul>
<li><a href='#'>inside of nav ul li</a></li>
<li><a href='#'>inside of nav ul li</a></li>
<a href='#'>outside of li tag becuase it doesnot match 'nav ul li a' rule becuase selector goes on to dig deep into li tag since anchor tag is outside it discards it all together </a>
</ul>
</nav>
<a href='#'>outside of nav</a>
但是我們只使用 A 作為選擇器查詢它不關心 A 在哪里它只是將它應用于它可以在整個檔案中找到的每個單獨的 acnhor 標簽。'nav ul a' 的情況也是如此,它不在乎 a 是在 li 內還是在 li 外,它會將它應用于在 nav ul 標簽中找到的每個標簽。'nav a' 任何和每個帶有 in 導航標簽的錨標簽的情況也是如此。因此,實際上“a”僅表示整個檔案中的每個錨標記。
a {
color: red;
}
<a href='#'>outside of nav</a>
<nav>
<ul>
<li><a href='#'>inside of nav</a></li>
<li><a href='#'>inside of nav</a></li>
</ul>
</nav>
<a href='#'>outside of nav</a>
我會進一步建議 breif 閱讀有關 css 選擇器引擎如何作業的資訊。
uj5u.com熱心網友回復:
如果您為nav ul li acss 屬性添加 css 屬性,則該屬性將僅適用于導航欄中的錨標記。如果導航欄外有任何錨標記,則 css 屬性將不適用于它。如果您只是為錨標記提供 css,則該屬性將應用于 html 中存在的所有錨標記。
nav ul li a {
color: red;
}
<a href='#'>outside of nav</a>
<nav>
<ul>
<li><a href='#'>inside of nav ul li</a></li>
<li><a href='#'>inside of nav ul li</a></li>
<a href='#'>outside of li tag becuase it doesnot match 'nav ul li a' rule becuase selector goes on to dig deep into li tag since anchor tag is outside it discards it all together </a>
</ul>
</nav>
<a href='#'>outside of nav</a>
轉載請註明出處,本文鏈接:https://www.uj5u.com/yidong/381650.html
上一篇:單擊按鈕添加評論框
