<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>复合选择器之后代选择器</title> <style> /* 我想要把ol里面的小li选出来改为pink */ ol li { color: pink; } /* 中国 山东 济南 蓝翔 */ ol li a { color: red; } .nav li a { color: yellow; } </style> </head> <body> <ol> 变态写法 <li>我是ol 的孩子</li> <li>我是ol 的孩子</li> <li>我是ol 的孩子</li> <li><a href="#">我是孙子</a></li> </ol> <ul> <li>我是ul 的孩子</li> <li>我是ul 的孩子</li> <li>我是ul 的孩子</li> <li><a href="#">不会变化的</a></li> </ul> <ul class="nav"> <li>我是ul 的孩子</li> <li>我是ul 的孩子</li> <li>我是ul 的孩子</li> <li><a href="#">不会变化的</a></li> <li><a href="#">不会变化的</a></li> <li><a href="#">不会变化的</a></li> <li><a href="#">不会变化的</a></li> </ul> </body> </html>
效果图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>复合选择器之子元素选择器</title> <style> .nav>a { color: red; } </style> </head> <body> <div class="nav"> <a href="#">我是儿子</a> <p> <a href="#">我是孙子</a> </p> </div> </body> </html>
效果图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>复合选择器之并集选择器</title> <style> /* 要求1: 请把熊大和熊二改为粉色 */ /* div, p { color: pink; } */ /* 要求2: 请把熊大和熊二改为粉色 还有 小猪一家改为粉色 */ div, p, .pig li { color: pink; } /* 约定的语法规范,我们并集选择器喜欢竖着写 */ /* 一定要注意,最后一个选择器 不需要加逗号 */ </style> </head> <body> <div>熊大</div> <p>熊二</p> <span>光头强</span> <ul class="pig"> <li>小猪佩奇</li> <li>猪爸爸</li> <li>猪妈妈</li> </ul> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>复合选择器之链接伪类选择器</title> <style> /* 1.未访问的链接 a:link 把没有点击过的(访问过的)链接选出来 */ a:link { color: #333; text-decoration: none; } /*2. a:visited 选择点击过的(访问过的)链接 */ a:visited { color: orange; } /*3. a:hover 选择鼠标经过的那个链接 */ a:hover { color: skyblue; } /* 4. a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */ a:active { color: green; } </style> </head> <body> <a href="#">小猪佩奇</a> <a href="http://www.xxxxxxxx.com">未知的网站</a> </body> </html>
a标签不受body标签的指定