css3学习笔记
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css3学习笔记相关的知识，希望对你有一定的参考价值。
Css3 选择器
属性选择器
E[attr]只使用属性名，但没有确定任何属性值
E[attr="value"]指定属性名，并指定了该属性的属性值
E[attr~="value"]指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“?”不能不写
E[attr^="value"]指定了属性名，并且有属性值，属性值是以value开头的
E[attr$="value"]指定了属性名，并且有属性值，而且属性值是以value结束的
E[attr*="value"]指定了属性名，并且有属性值，而且属值中包含了value
E[attr|="value"]指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）
实例：百度文库;
<style>
p{height:30px; line-height:30px; font-size:12px;border:1px solid #000;}
p a{background:url(img/w.gif) no-repeat 3px center;padding-left:20px; display:block;}
p a[href*=text]{ background-image:url(img/text.gif);}
p a[href*=pdf]{ background-image:url(img/swf.gif);}
p a[href*=exl]{ background-image:url(img/x.gif);}
</style>
</head>
<body>
<p>
<a href="http://www.miaov.com/doc/javascript.html">测试文字</a>
</p>
<p>
<a href="http://www.miaov.com/text/javascript.html">测试文字</a>
</p>
<p>
<a href="http://www.miaov.com/pdf/javascript.html">测试文字</a>
</p>
<p>
<a href="http://www.miaov.com/exl/javascript.html">测试文字</a>
</p>备注：IE7及以上支持;
结构性伪类
E:nth-child(n) 表示E父元素中的第n个字节点
p:nth-child(odd){background:red}/匹配奇数行/
p:nth-child(even){background:red}/匹配偶数行/
p:nth-child(2n){background:red}
E:nth-last-child(n) 表示E父元素中的第n个字节点，从后向前计算
E:nth-of-type(n) 表示E父元素中的第n个字节点，且类型为E
E:nth-last-of-type(n)表示E父元素中的第n个字节点，且类型为E,从后向前计算
E:empty 表示E元素中没有子节点。注意：子节点包含文本节点
E:first-child 表示E元素中的第一个子节点
E:last-child 表示E元素中的最后一个子节点
E:first-of-type 表示E父元素中的第一个子节点且节点类型是E的
E:last-of-type 表示E父元素中的最后一个子节点且节点类型是E的
E:only-child表示E元素中只有一个子节点。注意：子节点不包含文本节点
E:only-of-type 表示E的父元素中只有一个子节点，且这个唯一的子节点的类型必须是E。注意：子节点不包含文本节点
实例：新浪头部导航
<style>
.list{margin:0;padding:0; list-style:none;}
.list li{width:150px;border-right:1px solid #000;float:left;}
.list li:last-of-type{border:none;}
.list a{float:left;width:40px;margin:0 5px; font:12px/30px "宋体"; text-align:center;}
.list li a:nth-of-type(3n+1){ font-weight:bold;}
.list li:nth-child(3) a:nth-child(2){ color:red;}
</style>
</head>
<body>
<ul class="list">
<li>
<a href="#">测试文字</a>
<a href="#">测试文字</a>
<a href="#">测试文字</a>
<a href="#">测试文字</a>
<a href="#">测试文字</a>
<a href="#">测试文字</a>
<a href="#">测试文字</a>
<a href="#">测试文字</a>
<a href="#">测试文字</a>
</li>
<li>
<a href="#">测试文字</a>
<a href="#">测试文字</a>
<a href="#">测试文字</a>
<a href="#">测试文字</a>
<a href="#">测试文字</a>
<a href="#">测试文字</a>
<a href="#">测试文字</a>
<a href="#">测试文字</a>
<a href="#">测试文字</a>
</li>
<li>
<a href="#">测试文字</a>
<a href="#">测试文字</a>
<a href="#">测试文字</a>
<a href="#">测试文字</a>
<a href="#">测试文字</a>
<a href="#">测试文字