注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

左岸

web前端

 
 
 

日志

 
 

css3——选择器(一):基础选择器  

2014-07-14 16:23:39|  分类: css3 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
1、通配符选择器:(*)
 所有浏览器支持通配符选择器。
 通配符选择器是用来选择所有元素,也可以选择某个元素下的所有元素。

*{margin:0px;}

.side *{margin:0px;}

2、元素选择器:(E)
 所有浏览器支持通配符选择器。
元素选择器其实就是文档的元素, 即各种标签 ,如html,body,p,div等。

li{margin:0px;}

3、类选择器:(.class)
 所有浏览器都支持类选择器,但多类选择器(.className1.className2)不被ie6支持。
样式名

.list{margin:0px;}

.a.b{background: #000;} //多类选择器 中间没有空格只对元素中同时包含了"a"和"b"两个类才能起作用

4、id选择器:(#id)
所有浏览器都支持ID选择器。

#list{margin:0px;}

5、后代选择器:(E  F)
所有浏览器都支的后代选择器。

.list li{margin:0px;}

6、子选择器:(E>F)
IE6不支持子元素选择器。

.a>.b{background: #000;}

7、相邻兄弟元素选择器:(E+F)
IE6不支持这个选择器。
选中E后面紧邻的兄弟F元素

css:

li + li {background: green;color: yellow; border: 1px solid #ccc;}

html:

<li >1</li><li >2</li><li >3</li><li >4</li><li >5</li>

选中的是 后面4个

8、通配兄弟选择器:(E~F)
IE6不支持这种选择器的用法。
选中E后面所有的兄弟F元素 ,css3新增选择器。

css:
.li + li {background: green;color: yellow; border: 1px solid #ccc;}
html:
<li >1</li><li class="li">2</li><li >3</li><li >4</li><li >5</li>
选中的是 后面3个

9、群组选择器:(class1,class2,)
所有浏览器都支的后代选择器。
群组选择器是将具有相同样式的元素分组在一起,每个选择器之间使用逗号“,”隔开。

.a,.b{background: #000;}


第8种是css3新增的,第1、6、7是css2新增的,第2、3、4、5、9为css1已有的。


  评论这张
 
阅读(23)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017