派生選擇器
派生選擇器允許你根據(jù)文檔的上下文關(guān)系來確定某個(gè)標(biāo)簽的樣式。通過合理地使用派生選擇器,我們可以使 HTML 代碼變得更加整潔。 比方說,你希望列表中的 strong 元素變?yōu)榧t色,而不是通常的黑色,可以這樣定義一個(gè)派生選擇器:
li strong{ color: red; }
請(qǐng)注意在 HTML 中標(biāo)記為<li><strong> 的代碼的上下文關(guān)系
<p><strong>我是黑色,因?yàn)槲也辉诹斜懋?dāng)中,所以這個(gè)規(guī)則對(duì)我不起作用</strong></p> <u1> <li><strong>我是紅色。這是因?yàn)?nbsp;strong 元素位于 li 元素內(nèi)。</li> </u1>
完整代碼如下:
index.html
<!doctype html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="mycss.css" type="text/css"> </head> <body> <p><strong>我是黑色,因?yàn)槲也辉诹斜懋?dāng)中,所以這個(gè)規(guī)則對(duì)我不起作用</strong></p> <u1> <li><strong>我是紅色,這是因?yàn)?nbsp;strong 元素位于 li 元素內(nèi)。</strong></li> </u1> </body></html>
mycss.css
li strong{ color: red; }
運(yùn)行結(jié)果:
在 css 中定義的 li strong 的樣式,只會(huì)影響上面 html 文件中的<li><strong>,而不會(huì)影響<p><strong>中的內(nèi)容