标签:
/*有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"]) { }
标签:
原文地址:http://blog.csdn.net/baiding1123/article/details/51331915