您的位置：首页 > Web前端 > CSS

css3新增的选择器

2016-04-17 19:54 579 查看
css3的属性选择器
E[foo]选择匹配E的元素，且该元素定义了foo属性。注意，E选择器可以省略，表示选择定义了foo属性的任意类型元素
E[foo="bar"]选择匹配E的元素，且该元素将foo属性值定义为了"bar"。注意，E选择器可以省略，用法与上一个选择器类似。
E[foo~="bar"]
选择匹配E的元素，且该元素定义了foo属性，foo属性值是一个以空格符分隔的列表，其中一个列表的值为"bar"。注意，E选择符可以省略，表示可以匹配任意类型的元素。例如，a[tittle~="b1"]匹配<a title="b1 b2 b3"></a>，而不是匹配<a title="b2 b3 b5"></a>
E[foo|="en"]选择匹配E的元素，且该元素定义了foo属性，foo属性值是一个用连字符(-)分隔的列表，值开头的字符为 en。注意，E选择符可以省略，表示可以匹配任意类型的元素。例如，[lang|="en"]匹配<body lang="en-us"></body>,而不是匹配<body lang="f-ag"></body>
E[foo^="bar"]选择匹配E的元素，且该元素定义了foo属性，foo属性值包含了前缀为"bar"的字符串。注意，E选择符可以省略，表示可以匹配任意类型的元素。例如，body[lang^="en"]匹配<body lang="en-us"></body>,而不匹配<body lang="f-ag"></body>
E[foo$="bar"]选择匹配E的元素，且该元素定义了foo属性，foo属性值包含后缀为"bar"的字符串。注意E选择符可以省略，表示可以匹配任意类型的元素。例如，img[src$=""jpg]匹配<img src="p.jpg" />,而不匹配<img src="p.gif" />
E[foo*="bar"]选择匹配E的元素，且该元素定义了foo属性，foo属性值包含"bar"的子字符串。注意，E选择符可以省略，表示可以匹配任意类型的元素。例如： img[src$="jpg"]匹配<img src="p.jpg" />,而不匹配<img src="p.gif" />
  
<style type="text/css">
[align] {color: red}
[align="left"] {font-size: 20px;font-weight: bolder}
[lang^="en"] {color: blue;text-decoration: underline}/*匹配以en开头的lang属性*/
[src$="gif"] {border: 5px solid red} /*匹配以gif结尾的src属性值*/
[class~="wuzhe"] {background: orange} /*匹配以空格隔开的含有wuzhe的class属性（只有一个wuzhe的class也匹配）*/
[class|="wu"] {background: yellow} /*匹配以连字符"-"隔开的含有wu的class属性*/
</style>
</head>
<body>
<p align="center">这是使用属性定义样式</p>
<p align="left">这是使用属性值定义样式</p>
<p lang="en-us">我是蓝色的</p>
<p>下面使用了属性值后缀定义样式</p>
<img src="2.gif" border="1" />
<div class="wuzhe">我命由我不由天</div>
<div class="wuzhe wuming">彰显英雄本色</div>
<div class="wu-zhe">项羽</div>

结构伪类选择器
选择器含义
E:root匹配文档的根元素，对于html文档，就是html元素
E:nth-child(n)匹配其父元素的第n个子元素，第一个编号为1,n也可以是odd或even或n的表达式
E:nth-last-child(n)匹配其父元素的倒数第n个元素，第一个编号为1
E:nth-of-type(n)与:nth-child()作用类似，但是仅仅匹配使用同种标签的元素
E:nth-last-of-type(n)与:nth-last-child()作用类似，但是仅仅匹配使用同种标签的元素
E:last-child匹配父元素的最后一个子元素，等同于：nth-last-child(1)
E:first-of-type匹配父元素下使用使用同种标签的第一个子元素，等同于:nth-of-type(1)
E:last-of-type匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
E:only-child匹配父元素下仅有的一个子元素
E:only-of-type匹配父元素下使用同种标签的唯一一个子元素
E:empty匹配一个不包含任何子元素的元素，注意，文本节点也被看做子元素
<style type="text/css">
:root {background: aquamarine} /*选择html*/
tr:nth-child(even) { /*选择tr的父元素下的偶数行的tr*/
background: red;
}
tr:nth-last-child(2) { /*选择tr父元素下的倒数第三个的tr*/
background: blue;
}
/*ul li:nth-of-type(odd) { /!*不是li元素则会跳过，不会在表达式计算*!/
background: purple;
}*/
ul:first-of-type { /*匹配ul父元素下第一个ul元素(不管ul之前有多少其他元素，都会匹配ul)*/
background: green;
}
ul:first-child { /*匹配ul父元素下第一个ul元素(如果ul之前有其他元素，则匹配不成功)*/
background: purple;
}
</style>
<table>
<tr class="1">
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
<td>07</td>
<td>08</td>
</tr>
<tr class="2">
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
<td>07</td>
<td>08</td>
</tr>
<tr class="3">
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
<td>07</td>
<td>08</td>
</tr>
<tr class="4">
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
<td>07</td>
<td>08</td>
</tr>
<tr class="5">
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
<td>07</td>
<td>08</td>
</tr>
<tr class="6">
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
<td>07</td>
<td>08</td>
</tr>
<tr class="7">
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
<td>07</td>
<td>08</td>
</tr>
<tr class="8">
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
<td>07</td>
<td>08</td>
</tr>
</table>
<ul>
<p>wwu</p>
<li>1</li>
<li>2
<ul>
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
<li>05</li>
<li>06</li>
</ul>
</li>
<li>3
<ul>
<li>鲁班大师</li>
</ul>
</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<ul>
<li>001</li>
<li>002
<ul>
<li>廉颇</li>
</ul>
</li>
<li>003</li>
</ul>

UI元素常用的状态伪类选择器
E:enabled
匹配E的所有可用UI元素。注意、在网页中，UI元素一般是指包含在form元素内的表单元素。例如input:enabled匹配<form><input type="text"><input  type="button" disabled=disabled /></form>代码中的文本框，而不匹配代码中的按钮
E:disabled与上相反
E:checked例如，input:checked匹配<form><input type="checkbox" /></form><input type="radio" checked="checked"/></form>代码中的单选按钮，但不匹配改代码中的复选框
  
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航