Created
June 11, 2014 08:21
-
-
Save shangmin1990/3a0a478a94b802efb7f5 to your computer and use it in GitHub Desktop.
css selection
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
1.通用选择器 | |
* 所有元素 | |
E 标签选择器 div etc html tag | |
.info class选择器 or div.info | |
# id选择器 | |
2.组合选择器 | |
E,F 匹配多元素,同时匹配标签1与标签2 | |
E F 后代元素选择器 注意:这里可以是后代的后代 | |
E > F 子元素选择器 注意:这里只能是直系后代,后代的后代不起作用 | |
E + F 兄弟元素选择器 注意:这里只能选中 紧跟E元素后的兄弟元素 | |
3.属性选择器 | |
E[attr] 具有attr属性的标签E | |
E[attr='value'] 具有attr属性并且等于'value'的E元素 | |
E[attr~='value'] attr具有多个值空格分开,其中一个值是value的E元素 | |
E[attr|='value'] attr具有多个连字号分割(en-us)其中一个值以value开头的E元素主要用于lang属性 exp:E[lang|='en']{color:'red'} | |
4.伪类选择器 | |
E:first-child | |
E:link 未被点击的链接 | |
E:visited 被点击过的链接 | |
E:active 匹配鼠标已经按下并没有释放的E元素 | |
E:hover 鼠标悬停其上的E元素 | |
E:focus 获取焦点的元素 | |
E:lang(c) 属性lang=c的E元素 | |
5.伪元素选择器 | |
E:first-line 匹配E元素的第一行 | |
E:first-letter | |
E:before 再E元素之前插入生成内容 E:before{content:abc} | |
E:after 再E元素的末尾插入生成的内容 E:after:{content:def} | |
css3中的选择器 | |
组合选择器 | |
E~F 匹配E 后的所有兄弟元素 F | |
属性选择器 | |
E[attr^='abc'] | |
E[attr$='bcd'] | |
E[attr*='def'] | |
伪类选择器 | |
E:enable | |
E:disable | |
E:checked radio 或者 checkbox被选中元素 | |
E:selection 匹配当前用户选中的元素 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment