HTML中的偽選擇器
[英]pseudo selectors in html
問題描述
我僅使用nth-child(odd)偽類將顏色添加到備用列表項中，但是我不知道為什么顏色顯示在邊框JSFiddle之外 。
header li:nth-child(odd){
background-color:cyan;
}
完整演示：
header li { list-style: none; } a:link, a:visited { text-decoration: none; background-color: blue; display: block; border: 1px solid blue; color: black; width: 150px; margin-bottom: 1px; text-align: center; } a:hover, a:active { background-color: deeppink; color: purple; } header li:nth-child(odd) { background-color: cyan; }
<header> <h1>This is simple demonstration of different ways of using Pseudo-Selectors</h1> <ol> <li><a href="https://www.facebook.com/" target="_blank">Sambar</a> </li> <li><a href="https://www.facebook.com/" target="_blank">Idli</a> </li> <li><a href="https://www.facebook.com/" target="_blank">Mysore Bonda</a> </li> <li><a href="https://www.facebook.com/" target="_blank">Cashew Bonda</a> </li> <li><a href="https://www.facebook.com/" target="_blank">Pesarattu Upma</a> </li> <li><a href="https://www.facebook.com/" target="_blank">Cornflakes</a> </li> <li><a href="https://www.facebook.com/" target="_blank">Thai curry</a> </li> <li><a href="https://www.facebook.com/" target="_blank">Parmesan Garlic</a> </li> <li><a href="https://www.facebook.com/" target="_blank">Honey BBQ</a> </li> <li><a href="https://www.facebook.com/" target="_blank">Pappu Charu</a> </li> </ol> </header>
1 個解決方案
解決方案1
0 已采納 2016-10-26 21:42:09
您必須將其應用於anchor（ a ）元素：
header li:nth-child(odd) a {
background-color: cyan;
}
header li { list-style: none; } a:link, a:visited { text-decoration: none; background-color: blue; display: block; border: 1px solid blue; color: black; width: 150px; margin-bottom: 1px; text-align: center; } a:hover, a:active { background-color: deeppink; color: purple; } header li:nth-child(odd) a { background-color: cyan; }
<title>Pseudo-Selectors</title> <body> <header> <h1>This is simple demonstration of different ways of using Pseudo-Selectors</h1> <ol> <li><a href="https://www.facebook.com/" target="_blank">Sambar</a> </li> <li><a href="https://www.facebook.com/" target="_blank">Idli</a> </li> <li><a href="https://www.facebook.com/" target="_blank">Mysore Bonda</a> </li> <li><a href="https://www.facebook.com/" target="_blank">Cashew Bonda</a> </li> <li><a href="https://www.facebook.com/" target="_blank">Pesarattu Upma</a> </li> <li><a href="https://www.facebook.com/" target="_blank">Cornflakes</a> </li> <li><a href="https://www.facebook.com/" target="_blank">Thai curry</a> </li> <li><a href="https://www.facebook.com/" target="_blank">Parmesan Garlic</a> </li> <li><a href="https://www.facebook.com/" target="_blank">Honey BBQ</a> </li> <li><a href="https://www.facebook.com/" target="_blank">Pappu Charu</a> </li> </ol> </header> </body>
偽選擇器（例如：hover）可以與通用選擇器一起使用嗎？
[英]Can pseudo selectors (such as :hover) be used with the universal selector?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.