认识一波CSS高级选择器

/*有6个不同类型的属性选择器：*/
[att=value]
/*该属性有指定的确切的值。*/
[att~=value]
/*该属性的值必须是一系列用空格隔开的多个值，(比如，class=”title featured home”)，而且这些值中的一个必须是指定的值”value”。*/
[att|=value]
/*属性的值就是“value”或者以“value”开始并立即跟上一个“-”字符*/
[att^=value]
/*该属性的值以指定值开始。*/
[att$=value]
/*该属性的值包含指定的值(而无论其位置)。*/
[att*=value]
/*该属性的值以指定的值结束*/

div[class|= "item"]{  /* class是item或者是item-开始的类 */
    background-color: #e2e2e2;
}

/* 兄弟 或者相邻同胞选择器  即同一个父元素下某一个父元素之后的元素 */
h2 + p{} /* 选择紧跟h2后边第一个p */
h2 ~ p{} /* 选择紧跟h2后边所有的p */
/*伪类 */
/*动态伪类 连接和行为*/
:link :visited;
:hover :active :focus;

/*子类选择器*/
:first-child :last-child;

/*CSS3伪类：*/
:target
/*锚点 点击锚点的时候就可以使用 当锚链接被选择的时候就可以出现样式 */
h2:target{
    background-color: red;
}
/*元素状态伪类*/
:enabled :disabled :checked
input:disabled { border:1px dotted #999; background:#F2F2F2; }
input[type=”checkbox”]:checked { color:red; }
/* 结构伪类 括号可以是具体的数字，也可以是表达式 或者even odd */
.classname:nth-child(1){}
.classname:nth-child(3n){}
ul li:nth-last-child(odd) { /* 从后向前选择 */
color: grey;
}
/* 只选择指定的元素 */
/* 控制段落 但是又想无视其他元素 */
p:nth-of-type(even) { color: blue; }
.post img:nth-of-type(n+2):nth-last-of-type(n+2) { float: left; }
/* 这种伪选择器可以结合使用 排除post的img中第一个和最后一个元素 */

:first-of-type,:last-of-type{
}
:only-child{
}
:only-of-type{
}

/*否定选择器*/
input:not([type="submit"]) {

    }