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

淡淡De影痕的博客

将来的你一定会感激现在拼命的自己。

 
 
 

日志

 
 
 
 

【转载】css3选择器  

2014-05-19 09:39:33|  分类: CSS3小结 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
本文转载自云谦小记《css3选择器》

HTML与CSS主代码:

<!doctype html>
<html>
<head>
<title></title>
<meta charset='utf-8' />
<style type="text/css">
body,div,ul,li{
padding:0;
margin:0;
}
li{
list-style:none;
}
.demo {
width: 500px;
height:40px;
padding:10px;
}
li {
float: left;
height: 40px;
line-height: 40px;
width: 40px;
font-size:24px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
text-align: center;
background: #000;
color: #fff;
margin-right: 5px;
}
</style>
</head>
<body>
<div class="demo">
<ul class="clearfix">
<li id='one'>1</li>
<li id='two'>2</li>
<li id='three'>3</li>
<li id='four' class="brother">4</li>
<li id='five'>5</li>
<li id='six'>6</li>
<li id='seven'>7</li>
<li id='eight'>8</li>
<li id='nine'>9</li>
<li id='ten'>10</li>
</ul>
</div>
</body>
</html>


初始效果如图所示:
css3选择器 - 云谦小记 - 云谦小记
 
一、同级元素通用选择器: E ~ F
通用兄弟元素选择器是CSS3新增加一种选择器,这种选择器将选择某元素后面的所有兄弟元素,他们也和相邻兄弟元素类似,需要在同一个父元素之中,换句话说,E和F元素是属于同一父元素之内,并且F元素在E元素之后,那么E ~ F 选择器将选择中所有E元素后面的F元素
代码示例:类名为brother后面的li变红css3选择器 - 云谦小记 - 云谦小记
 

.brother ~ li{ background:red;}

css3选择器 - 云谦小记 - 云谦小记
 二、属性选择器(三种):
E[attr^="value"]属性选择器,指的是选择attr属性值以“value”开头的所有元素,换句话说,选择的属性对应的属性值是以“value”开始的.9的id名是以n开头,所以被选中

li[id^="n"]{background:red;}

css3选择器 - 云谦小记 - 云谦小记
E[attr$="value"]属性选择器刚好与E[attr^="value"]选择器相反,E[attr$="value"]表示的是选择attr属性值以"value"结尾的所有元素,换句话说就是选择元素attr属性,并且他的属性值是以value结尾的。6的id名是以x结尾的,所以

li[id$="x"]{background:red;}

css3选择器 - 云谦小记 - 云谦小记
E[attr$="val"]选择attr属性值中包含子串"val"的所有元素,也就是说,只要所选择的属性,其属性值中有这个"val"值都将被选中。这个运用在给一些特殊的链接加背景图片很方便的,比如说给pdf,png,doc等不同文件加上不同icon,我们就可以使用这个属性来实现。1,7,9,8的id名中都含有n

li[id*="n"]{background:red;}

css3选择器 - 云谦小记 - 云谦小记
三、伪类选择器:
结构性伪类选择器
E:root 匹配文档的根元素,对于HTML文档,就是HTML元素,整个页面变为红色

html:root {background-color:red;}

css3选择器 - 云谦小记 - 云谦小记
  E:nth-child(n) 匹配其父元素的第n个子元素,(n从一开始)
小技巧:
E:nth-child(2n)能够选取父元素下的索引值是2的倍数的元素
E:nth-child(2n+1)能够选取父元素下的索引值是(2n+1)的元素

li:nth-child(1){background: red;}

css3选择器 - 云谦小记 - 云谦小记
E:nth-last-child(n)   匹配其父元素的倒数第n个子元素,第一个编号为1 
E:last-child 匹配父元素的最后一个子元素,等同于:nth-last-child(1)
E:nth-of-type(n) 与:nth-child() 作用类似,但是仅匹配使用同种标签的元素 
E:nth-last-of-type(n) 与:nth-last-child() 作用类似,但是仅匹配使用同种标签的元素
E:first-of-type 匹配父元素下使用同种标签的第一个子元素,等同于:nth-of-type(1) 
E:last-of-type 匹配父元素下使用同种标签的最后一个子元素,等同于:nth-last-of-type(1)
E:only-child 匹配父元素下仅有的一个子元素,等同于:first-child:last-child或 :nth-child(1):nth-last-child(1) E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素,等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
E:empty 匹配一个不包含任何子元素的元素,注意,文本节点也被看作子元素
反选伪类选择器/否定选择器 
否定选择器 :not(),可以让你定位不匹配该选择器的元素。IE6-8浏览器不支持:not()选择器。否定选择器和jq中的:not选择器一模一样,就拿form中的元素来说明这个选择器的用法,比如你想对form中所有input加边框,但又不想submit也起变化,此时就可以使用:not为实现 input:not([type="submit"]) {border: 1px solid red;}

li:not(#six){background: red;}

css3选择器 - 云谦小记 - 云谦小记
与界面有关的伪类选择器
E:enabled 匹配表单中激活的元素
E:disabled 匹配表单中禁用的元素
E:checked 匹配表单中被选中的radio(单选框)或checkbox(复选框)元素
  E:selection 匹配用户当前选中的元素
我们把":enabled",":disabled",":checked"伪类称为UI元素状态伪类,这些主要是针对于HTML中的Form元素操作,最常见的比如我们"type="text"有enable和disabled两种状态,前者为可写状态,后者为不可状态;另外"type="radio"和"type="checkbox""有"checked"和"unchecked"两种状态。来看两个实例,比如说你想将"disabled"的文本框与别的文本框区别出来,你就可以这样应用
这样一来就把页面中禁用的文本框应用了一个不同的样式。那么对于其他几个用法是一样的,这里就不在讲述。IE6-8不支持":checked",":enabled",":disabled"这三种选择器。


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

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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