03超链接选择器简写.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>Document</title> <style> /*相当于a:link的未访问的链接样式*/ a { font-size: 16px; font-weight: 700; color: gray; } /* 有： 这种为伪类*/ /* 鼠标悬停效果*/ a:hover { color: red; } </style> </head> <body> <a href="#">秒杀</a> </body> </html>
04结构伪类选择器.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>Document</title> <style> /* li:first-child { color: blue; } li:last-child { color: green; } 选择第三个孩子*/ /*li:nth-child(3) { color: yellow; } */ /* n 0 1 2 li编号从1开始编号*/ /* li:nth-child(2n-1) { color: skyblue; } */ /* odd奇数 li:nth-child(odd) { font-size: 20px; } even 偶数 li:nth-child(even) { font-size: 30px; } */ /* 倒数*/ li:nth-last-child(even) { color: red; } </style> </head> <body> <ul> <li>aaaaa</li> <li>bbbbbb</li> <li>ccccc</li> <li>ddddddddd</li> <li>eeeeee</li> <li>ffffff</li> </ul> </body> </html>