css中选择器介绍

选择器：

选择器是用来选择目标元素的，选择器分基础选择器和复合选择器及伪类选择器。

基础选择器：

	标签名{} /* 1 标签选择器：把某类标签全部选中，如下： */p{font-size:36px;}.类名{} /* 2 类选择器(class选择器)：选中相同类名的元素，.声明，class调用，如下： */.box{width:100px;height:50px;}<div class="box"></div><div class="box stylebox"></div> /* 多类名选择器：在class属性中添加多个类名，中间用空格隔开，即可调用多类名来实现多个样式*/#id名{} /* 3 id选择器：选中id被命名为某名的元素，#定义，id调用，id选择器具有唯一性，相同的id名只能出现在一个标签上 */#box{width:100px;height:200px;}<div id="box"></div>*{}/* 4 通配符选择器：选中文档中所有元素，不建议使用，一般使用的情况是非常少的。 */*{color:blue;font-size:20px;}

复合选择器：

	 div span{/* 1 后代选择器：又称包含选择器，用于选择标签的后代子孙元素及元素组，语法：外层标签写在前面，内层标签写在后面，中间用空格隔开，需要强调的是只要是后代无论多少代都可以选中，它和子代选择器的区别就在这里：不仅仅可以选择紧挨着的下一级元素。 */color:blue;}<div><ul><li><span>苹果</span><!-- 被选中项--></li></ul></div><span>白菜</span>ul li>a{/* 2子代选择器：选中某标签下紧挨着的某个元素，语法：父级标签 > 子级标签，强调的是：子代选择器选中的是父级紧挨着的子级元素，和后代选择器的区别就在这里。 */color:pink;}<ul><li><a href="#">test1</a><!-- 被选中项--></li><li><div><a href="#">test2</a></div></li></ul>p.watermelon{/* 3 交集选择器：即又的关系，同时满足条件的会被选中，语法：选择器1选择器2选择器n...,多个选择器连写，中间不用任何字符。 */color:red;}<p>apple</p><p>orange</p><p class="watermelon">watermelon</p><!-- 被选中项--><span>苹果</span><span>橙子</span><span class="watermelon">西瓜</span>p,span,.pear{/* 4 并集选择器：同时选择多个单独或一组标签，语法：多个选择器中间用逗号连接，可以快速选择需要给相同样式的所有标签 */color:red;font-size:40px;}<p>苹果</p><p>荔枝</p><del>大米</del><span>香蕉</span><ins>地瓜</ins><div class="pear">梨</div>.banana+li {/* 5 相邻元素选择器：选择紧挨着某元素下的一个兄弟元素，语法：选择器1 + 标签，注意兄弟元素选择器*/color: red;}<ul><li>苹果</li><li class="banana">香蕉</li><li>荔枝</li></ul>.banana~li {/* 6 兄弟元素选择器：选择挨着某元素下的所有兄弟元素，语法：选择器1 ~ 标签，注意相邻元素选择器*/color: red;}<ul><li>苹果</li><li class="banana">香蕉</li><li>荔枝</li><li>菠萝蜜</li><li>桃子</li></ul>

伪类选择器：

伪类选择器是以冒号：开始的，如下面链接伪类选择器（需要和伪元素区分）：

	a:link{color:black;}/* 设置未访问的链接样式 */a:visited{color:gray;}/* 设置已访问的链接样式 */a:hover{color:yellow;}/* 设置鼠标经过链接的样式 */a:active{color:red;}/* 设置鼠标点击时链接的样式 *//* 需要注意：这四个链接的伪类选择器是按照上面的顺序书写的，必须严格遵循。 */