CSS3–1.css3 新增选择器
2015-01-24 16:13
316 查看
1.后代级别选择器
2.同辈级别选择器
3.伪类选择器
4.属性选择器
5.UI伪类选择器
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metaname="keywords"content=""/>
<metaname="description"content="本篇网页的概述，一段话，对网站的进一步描述"/>
<metaname="author"content="网页作者的资料">
<metaname="robots"content=""/>
<metahttp-equiv="Content－Type"content="text/html;charset=gb2312">
<title>无标题文档</title>
<style>
.first{
border:1pxsolidred;
}
.second{
border:1pxsolidblue;
}
.third{
border:1pxsolidgreen;
}
ul,li{
list-style:none;padding:0;margin:5px0;
}
::selection{
background:red;
}
</style>
<style>
</style>
<script>
window.onload=function(){
varselects=document.getElementById("select");
varspans=document.getElementsByTagName("span")[0];
selects.onkeyup=function(){
if(selects.value==""){
return;
}
for(vari=0;i<document.styleSheets[1].cssRules.length;i++){
document.styleSheets[1].deleteRule(i);
}
varrule=selects.value+spans.innerHTML;
document.styleSheets[1].insertRule(rule,0);
}
}
</script>
</head>
<body>
<inputtype="text"id="select">
<span>
{
border:1pxsolidred;
background-color:red;
}
</span>
<ulclass="first">
<span>111</span>
<li>first-one</li>
<li>first-two</li>
<li>first-three</li>
<li>first-four</li></ul>
<ulclass="second">
<li>second-one</li>
<li>second-two</li>
<li>second-three</li>
<li>second-four</li>
<div>
</div>
</ul>
<ulclass="third">
<li>third-one</li>
<li>third-two</li>
<li>third-three</li>
<li>third-four</li>
</ul>
<ulclass="four">
<li>four-one</li>
<span>
</span>
</ul>
</body>
</html>
1.后代级别选择器
1.1:only-child
父元素下面只有一个子元素
1.2:nth-child(2)
2.同辈级别选择器
2.1element1+element2
*紧挨着element1的element2元素
2.2element1~element2
*element1后面的所有element2元素
2.3:first-of-type
同辈元素中的第1个元素
3.伪类选择器
3.1:target选择#id元素（跳转）
4.属性选择器
4.1.[attribute]
4.2.[attribute=value],[attribute*=value]
5.UI伪类选择器
1.后代级别选择器
| divp | 选择<div>元素内部的所有<p>元素。 | 1 | |
| div>p | 选择父元素为<div>元素的所有<p>元素。 | 2 | |
| p:only-child | 选择属于其父元素的唯一子元素的每个<p>元素。 | 3 | |
| p:nth-child(2) | 选择属于其父元素的第二个子元素的每个<p>元素。 | 3 | |
| p:nth-last-child(2) | 同上，从最后一个子元素开始计数。 | 3 | |
| p:first-child | 选择属于父元素的第一个子元素的每个<p>元素。 | 2 | |
| p:last-child | 选择属于其父元素最后一个子元素每个<p>元素。 | 3 | |
| :root | 选择文档的根元素。 | 3 | |
| p:empty | 选择没有子元素的每个<p>元素（包括文本节点）。 | 3 |
父元素下面只有一个子元素
1.2:nth-child(2)
2.同辈级别选择器
| div+p | 选择紧接在<div>元素之后的所有<p>元素。 | 2 | |
| p~ul | 选择前面有<p>元素的每个<ul>元素。 | 3 | |
| p:first-of-type | 选择属于其父元素的首个<p>元素的每个<p>元素。 | 3 | |
| p:last-of-type | 选择属于其父元素的最后<p>元素的每个<p>元素。 | 3 | |
| p:only-of-type | 选择属于其父元素唯一的<p>元素的每个<p>元素。 | 3 | |
| p:nth-of-type(2) | 选择属于其父元素第二个<p>元素的每个<p>元素。 | 3 | |
| p:nth-last-of-type(2) | 同上，但是从最后一个子元素开始计数。 | 3 |
*紧挨着element1的element2元素
2.2element1~element2
*element1后面的所有element2元素
2.3:first-of-type
同辈元素中的第1个元素
3.伪类选择器
| a:link | 选择所有未被访问的链接。 | 1 | |
| a:visited | 选择所有已被访问的链接。 | 1 | |
| a:active | 选择活动链接。 | 1 | |
| a:hover | 选择鼠标指针位于其上的链接。 | 1 | |
| input:focus | 选择获得焦点的input元素。 | 2 | |
| p:first-letter | 选择每个<p>元素的首字母。 | 1 | |
| p:first-line | 选择每个<p>元素的首行。 | 1 | |
| p:before | 在每个<p>元素的内容之前插入内容。 | 2 | |
| p:after | 在每个<p>元素的内容之后插入内容。 | 2 | |
| #news:target | 选择当前活动的#news元素。 | 3 |
4.属性选择器
| [target] | 选择带有target属性所有元素。 | 2 | |
| [target=_blank] | 选择target="_blank"的所有元素。 | 2 | |
| [title~=flower] | 选择title属性包含单词"flower"的所有元素。 | 2 | |
| [lang|=en] | 选择lang属性值以"en"开头的所有元素。 | 2 | |
| a[src^="https"] | 选择其src属性值以"https"开头的每个<a>元素。 | 3 | |
| a[src$=".pdf"] | 选择其src属性以".pdf"结尾的所有<a>元素。 | 3 | |
| a[src*="abc"] | 选择其src属性中包含"abc"子串的每个<a>元素。 | 3 |
4.2.[attribute=value],[attribute*=value]
5.UI伪类选择器
| input:enabled | 选择每个启用的<input>元素。 | 3 | |
| input:disabled | 选择每个禁用的<input>元素 | 3 | |
| input:checked | 选择每个被选中的<input>元素。 | 3 | |
| :not(p) | 选择非<p>元素的每个元素。 | 3 | |
| ::selection | 选择被用户选取的元素部分。 | 3 |
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- CSS系列：CSS3新增选择器
- css3新增选择器
- CSS3有哪些新增的选择器？
- CSS3实战之新增的选择器
- CSS3新增的选择器和属性
- CSS系列：CSS3新增选择器
- CSS3新增选择器
- 第二课：css选择器&选择器优先级及css3新增选择器（系统解析）
- 学习笔记 css3--选择器&新增颜色模式&文本相关
- 《CSS3 实战》 笔记 新增的选择器
- CSS3中新增的选择器
- 利用css3新增选择器制作背景切换
- 第二章 CSS3新增的选器之 选择器 last-child last-of-type区别
- css3新增选择器
- CSS3的新增选择器示例-属性选择器
- CSS3中新增了3个选择器
- 前端知识汇总-----CSS选择器和CSS3新增选择器
- css3新增选择器的一些练习。
- CSS选择器及CSS3新增选择器
- CSS3实战之新增的选择器