包含选择器 后代选择器 包含的是后代 子代选择器 包含儿子 div>p 则只有儿子收到效果 ul li:first-child { color: red; } ul li:nth-child(2) { color: aqua; } ul li:nth-child(3) { color: yellowgreen; } ul li:last-child { color: darkblue; } ul li:nth-child(2n+1) { } </style> <body> <ul> <li>123</li> <li>123</li> <li>123</li> <li>123</li> <li>123</li> ul li:nth-of-type(2) { color: red; } .box p:nth-of-type(2) { color: red; } </style> nth-child第几个孩子 nth-of-type 类型中的第几个 <body> <ul> <li>111</li> <li>111</li> <li>111</li> <li>111</li> </ul> <div class="box"> <h1>111</h1> <p>111</p> <p>111</p> </div> <style> /* 超链接的样式 */ /* a:link { color: cadetblue; } */ /* a:visited { color: cadetblue; } */ /* 被拜访之后的样式，但是直接设置没有任何反应 */ /* a:hover { color: pink; } */ /* 鼠标移入的样式 */ a:active { color: red; } /* 鼠标点击的样式 */ /* 目前浏览器组要支持hever和active */ /* 所有的标签都可以支持hover 但是只有a标签支持点击active */ div { width: 300px; height: 300px; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px;">#222; } div:hover { } </style> <body> <div> </div> <a href="">啊啊啊啊啊</a> <a>啊啊啊啊啊</a> <a href="">啊啊啊啊啊</a> </body> </html>
标签：nth,color,伪类,li,子代,111,child,选择器 From： https://www.cnblogs.com/xuxiang946210/p/17573581.html