CSS3中那些新增的选择器

CSS3中那些新增的选择器

要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。HTML页面中的元素就是通过CSS选择器进行控制的。

css3之前的选择器

• id选择器
• 类选择器
• 伪类选择器（:link,visited,hover,active,focus,first-child）
• 伪元素选择器（::first-line,first-letter,before,after）
• 通配选择器(*)
• 属性选择器(E[att=“val”])
• 子包含选择器(E>F)
• 相邻选择器(E+F)

css3新增的选择器

• 新增属性选择器
  E[att^=“val”] ：选择具有att属性且属性值为以val开头的字符串的E元素。
  E[att$=“val”] ：选择具有att属性且属性值为以val结尾的字符串的E元素。
  E[att*=“val”] ：选择具有att属性且属性值为包含val的字符串的E元素。

	<style>
        div[class^="a"]{    /*以a开始*/
            background-color: blue;
        }
        div[class$="a"]{    /*以a结束*/
            background-color: green;
        }
        div[class*="a"]{    /*选择到所有含a的*/
            background-color: red;
        }
    </style>
     <div class="abc">div1</div>
     <div class="acc">div2</div>
     <div class="cba">div3</div>

• 新增的伪类选择器
  E:not(s)：匹配不含有s选择符的元素E。
  E:root：匹配E元素在文档的根元素。在HTML中，根元素永远是HTML
  E:last-child ：匹配父元素的最后一个子元素E。
  E:only-child：匹配父元素仅有的一个子元素E。
  E:nth-child(n)：匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效。
  E:nth-last-child(n) ：匹配父元素的倒数第n个子元素E，假设该子元素不是E，则选择符无效。
  E:first-of-type：匹配父元素下第一个类型为E的子元素。
  E:last-of-type：匹配父元素下的所有E子元素中的倒数第一个。
  E:only-of-type：匹配父元素的所有子元素中唯一的那个子元素E。
  E:nth-of-type(n) ：匹配父元素的第n个子元素E。
  E:nth-last-of-type(n)：匹配父元素的倒数第n个子元素E。
  E:empty：匹配没有任何子元素（包括text节点）的元素E。

	<style type="text/css">            
    	.list div:nth-child(2){
        	background-color:red;
    	}
	</style>
	......
	<div class="list">
    	<h2>1</h2>
    	<div>2</div>
    	<div>3</div>
    	<div>4</div>
   		<div>5</div>
	</div>

	<!-- 第2个子元素div匹配 -->

• UI元素状态伪类选择器
  E:checked ：匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
  E:enabled ：匹配用户界面上处于可用状态的元素E。
  E:disabled ：匹配用户界面上处于禁用状态的元素E。

	<style type="text/css"> 
		input:checked{
        width: 200px;
        height: 200px;
        background-color: green;
        }
        input:checked+span::after{
        content: "选中了这个";
        color: indigo;
        background-color: lightcoral;
        }
        </style>
        ···
    <label>
        <input type="checkbox">
        <span></span>
    </label>  
    <!-- 选中复选框，改变了复选框的样式 -->

E:target：匹配相关URL指向的E元素。对应锚点的样式

	<style type="text/css">
    	h2:target{
        	color:red;
    	}
	</style>
......
	<a href="#tit01">标题一</a>
......
	<h2 id="tit01">标题一</h2>

	<!-- 点击链接，h2标题变红 -->

• 新增伪对象选择器
  E::placeholder ：设置对象文字占位符的样式。
  E::selection ：设置对象被选择时的样式。