常用选择器认识
实例
<!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选择器种类繁多，在于灵活运用，使用过程中应注意选择器的权重大小，选择最适合业务的选择器就好。
