属性选择器
语法：
1 元素[attr^="val"];/* 选择匹配元素，并且元素定义了属性attr，其属性值以val开头的任意字符串 */ 2 元素[attr$="val"];/* 选择匹配元素，并且元素定义了属性attr，其属性值以val结尾的任意字符串 */ 3 元素[attr*="val"];/* 选择匹配元素，并且元素定义了属性attr，其属性值任意位置包含了val */
html代码：
1 <a href="" class="Ais">这是一个带class的a</a> 2 <a href="123.jpg">这是一个指向图片的a</a> 3 <a href="" title="这个a可不一般">这是一个有title的a</a>
css代码：
1 a[class^="A"]{ 2 background:red; 3 } 4 a[href$=".jpg"]{ 5 background:green; 6 } 7 a[title*="a"]{ 8 background:blue; 9 }
效果：
结构性伪类选择器—root
“:root”选择器等同于<html>元素。
1 /* 两者相等 */ 2 :root{background:orange} 3 html {background:orange;}
结构性伪类选择器—not
:not选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。就拿form元素来说，比如说你想给表单中除submit按钮之外的input元素添加红色边框，css代码可以写成：
1 form { 2 width: 200px; 3 margin: 20px auto; 4 } 5 div { 6 margin-bottom: 20px; 7 } 8 input:not([type="submit"]){ 9 border:1px solid red; 10 }
html代码：
1 <form action="#"> 2 <div> 3 <label for="name">Text Input:</label> 4 <input type="text" name="name" id="name" placeholder="John Smith" /> 5 </div> 6 <div> 7 <label for="name">Password Input:</label> 8 <input type="text" name="name" id="name" placeholder="John Smith" /> 9 </div> 10 <div> 11 <input type="submit" value="Submit" /> 12 </div> 13 </form>
效果：
