认识一波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{}/* 元素内子元素后生成内容 */