Correction status:Uncorrected
Teacher's comments:
常用选择器认识
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box{background: #ccc;width: 800px; margin: 0 auto;}/*class选择器*/ div,p{background: #000}/*选择所有 <div> 元素和所有 <p> 元素。*/ .box p{line-height: 40px;}/*后代选择*/ #a1{color:red;} /*id选择器*/ a{font-size: 20px;}/*元素选择器*/ .box>a{font-size: 18px;}/*父子选择器*/ a:nth-child(3){font-size: 24px;}/*伪类选择器*/ p+a{color: green}/*兄弟选择器*/ a[href="www.baidu.com"]{color:green;}/*属性选择器*/ </style> </head> <body> <div class="box"> <p>88888888</p> <a href="javascript:;">aaaaaa</a> <a href="javascript:;">aaaaaa</a> <a href="www.baidu.com">aaaaaa</a> <a href="javascript:;" id="a1">aaaaaa</a> </div> <a href="javascript:;">bbbb</a> <a href="javascript:;">bbbb</a> </body> </html>
点击 "运行实例" 按钮查看在线实例
css选择器种类繁多,在于灵活运用,使用过程中应注意选择器的权重大小,选择最适合业务的选择器就好。