Skip to content

Instantly share code, notes, and snippets.

@shangmin1990
Created June 11, 2014 08:21
Show Gist options
  • Save shangmin1990/3a0a478a94b802efb7f5 to your computer and use it in GitHub Desktop.
Save shangmin1990/3a0a478a94b802efb7f5 to your computer and use it in GitHub Desktop.
css selection
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