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

薛沛然 廊坊师范学院 九期信息技术提高班

无脑地生活,像白痴一样成长,不给自己留感伤的时间。。。

 
 
 

日志

 
 

css选择器(部分材料来源于W3CPLUS)  

2014-02-19 20:57:00|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
在css的学习中,选择器是非常重要的部分。下面,通过实例,来对选择器有一个非常形象的展示。
html代码:
<div id="mother">
 <ul>
 <li class="1">春</li>
 <li class="2">夏</li>
 <li class="3">秋</li>
 <li class="4">冬</li>
 </ul>
</div>
css代码:
#mother{
margin:0px;padding:0px; 
background:#3C3;
text-align:center;
height:18px;
}
ul{
height:18px;
margin: 0 auto; /*居中*/
padding:0px;
width:700px;
}
li{
display:inline-block; /*行内块元素*/
list-style:none; /*取消格式*/
background:gray;
border-radius:10px;/*方格圆角*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
效果图:
css选择器(部分材料来源于W3CPLUS) - 薛沛然 - 薛沛然 廊坊师范学院 九期信息技术提高班
 一通配符选择器(*) 
通配符选择器是用来选择所有元素,,也可以选择某个元素下的所有元素。
为每个标签添加红色框
*{
border:1px solid red;
}
效果图:
css选择器(部分材料来源于W3CPLUS) - 薛沛然 - 薛沛然 廊坊师范学院 九期信息技术提高班
 也可以选择某个标签内所有元素。
. demo * {border:1px solid blue;}
二、元素选择器(E) 
元素选择器,是css选择器中最常见而且最基本的选择器。元素选择器其实就是文档的元素,如html,body,p,div等等,比如我们这个demo中元素包括了div,ul,li等。 (所有浏览器均支持元素选择器)
为ul中每个li标签改背景色为红色
li{background:red;}
效果图:
css选择器(部分材料来源于W3CPLUS) - 薛沛然 - 薛沛然 廊坊师范学院 九期信息技术提高班
 
三、类选择器(.className) 
使用类选择器之前需要在html元素上定义类名,换句话说需要保证类名在html标记中存在,这样才能选择类 
1让"冬"字背景色变黄色
<li class="summer">夏</li>
li.summer{background:yellow;}
也可以这么写
.summer{background:yellow;}(如果多个标签都拥有同一个类,这会改变所有的标签)
效果:
css选择器(部分材料来源于W3CPLUS) - 薛沛然 - 薛沛然 廊坊师范学院 九期信息技术提高班
 2多类选择器
参考w3c,我们会发现这样的写法:.summer.winter{background:yellow}。这样的写法本身没有问题,但是要求在class中必须同时包含summer,winter这两个名称,这种写法才奏效。
四、id选择器(#ID) 
ID选择器和上面说的类选择器是很相似的,在使用ID选择器之前也需要先在html文档中加注ID名称,这样在样式选择器中才能找到相对应的元素,不同的是ID选择器是一个页面中唯一的,不能够重复。
让春的背景色变蓝
<li id="blue">春</li>
#blue
{
background:blue;
}
效果:
css选择器(部分材料来源于W3CPLUS) - 薛沛然 - 薛沛然 廊坊师范学院 九期信息技术提高班

五、后代选择器(E F)

在这里假设f是e的后代,不管f是e的多少代子孙,都会被选中。
选中div中的所有li
div li {color: yellow;}
效果:
css选择器(部分材料来源于W3CPLUS) - 薛沛然 - 薛沛然 廊坊师范学院 九期信息技术提高班
 

六、子元素选择器(E>F)

f是e的直接后代
选中div直接后代ul添加边框
div ul{
border:1px solid blue;
}
css选择器(部分材料来源于W3CPLUS) - 薛沛然 - 薛沛然 廊坊师范学院 九期信息技术提高班

七、相邻兄弟元素选择器(E + F)

相邻兄弟选择器可以选择紧接在另一元素后的元素,而且他们具有一个相同的父元素。
在这里,一共有三个li标签,下面将夏,秋,冬的字体改成红色。
li+li{color:red;}
效果:
css选择器(部分材料来源于W3CPLUS) - 薛沛然 - 薛沛然 廊坊师范学院 九期信息技术提高班

八、通用兄弟选择器(E ? F)

通用兄弟选择器选择e~f之所有的f元素。在这里将夏秋冬改成红色。
li~li{color:red;}
效果:
css选择器(部分材料来源于W3CPLUS) - 薛沛然 - 薛沛然 廊坊师范学院 九期信息技术提高班
 

九、群组选择器(selector1,selector2,...,selectorN)

选中相同样式的元素

总结
1不能被ie6识别的选择器:通用兄弟选择器,相邻兄弟选择器,子元素选择器,多元素选择器
2通用选择器:通配符选择器,元素选择器,id选择器,类选择器,后代选择器,群组选择器
  评论这张
 
阅读(89)| 评论(8)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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