认识一波CSS高级选择器

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

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

/* 兄弟 或者相邻同胞选择器  即同一个父元素下某一个元素之后的元素 */
h2 + p{} /* 选择相邻h2的第一个p */
h2 ~ p{} /* 选择与h2同级所有的p */
/*伪类 */
/* :empty伪类 表示当元素里面什么都没有的时候（包括空格、标签内换行），应用相关样式 */
.box { background-color: red; }
.box:empty { background-color: #fae6e6; }
可以由元素的状态来应用相关的样式，当元素中有内容（包括空格、文字或者其他标签）的时候:empty的样式失效
但用伪元素 比如::before或::after为元素添加内容的时候，:empty不会失效，它会忽略伪元素的内容。
/*动态伪类 连接和行为*/
:link /* 链接 没有被访问过的超链接或者锚点 */
:visited /* 链接 被访问过得超链接或者锚点 */
:hover /* 行为 悬停时 */
:active /* 行为 点击未松开时 */
:focus; /* 行为 获得焦点时 */

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

/*CSS3目标伪类选择符：*/
:target
/*元素被指向URL目标时 点击锚点的时候就可以使用 当锚链接被选择的时候就可以出现样式 */
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"]) {

}
input:not(S1, S2) { /* 不匹配选择符S1,或者S2 */

}
input:maches(S1, S2) { /* 匹配选择符S1或 S2 或S1S2都匹配 */

}

/* 伪元素选择符 */
E::first-line{}  /* 格式化元素的第一行 */
E::first-letter{} /* 格式化元素中的第一个字符 */
E::before{}/* 元素内子元素前生成内容 */
E::after{}/* 元素内子元素后生成内容 */