来自:http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/
1. *
- * {
- margin: 0;
- padding: 0;
- }
*代表选中全部选择器,有些人用来清零margin和padding属性,不过一般在测试中使用,不在正规项目中使用,因为*会让整个页面的负载加重
- #container * {
- border: 1px solid black;
- }
这个例子可以选中container的所有子选择器
兼容性
- IE6+
- Firefox
- Chrome
- Safari
- Opera
2. #X
- #container {
- width: 960px;
- margin: auto;
- }
使用井号表示选中名称为id的选择器,是简单常用的一种用法
自问:为了选中一个元素,我一定要使用id吗?
id选择器是严格的而且不允许复用,如果可以的话,先试着使用标签名、一个新的HTML5元素名或者是一个伪类。
兼容性
- IE6+
- Firefox
- Chrome
- Safari
- Opera
3. .X
- .error {
- color: red;
- }
这是类选择器,选中类名为x的元素对象。id和class的区别在与后者能够选中多个元素对象。对一组元素对象添加样式的时候,就可以使用class,或者,当要在众多元素中找到唯一的元素对象并对他添加样式的时候,就要使用id了。
兼容性
- IE6+
- Firefox
- Chrome
- Safari
- Opera
4. X Y
- li a {
- text-decoration: none;
- }
子选择器。他用来选择更底层的选择器,比如,在一个无序列表里面你只需选中里面的一个锚点,那么你就需要这样的选择器了。
兼容性
- IE6+
- Firefox
- Chrome
- Safari
- Opera
5. X
- a { color: red; }
- ul { margin-left: 0; }
如果你想要选中所有的同种元素,那就使用它们的标签类型作为选择器吧。比起使用id和class,这样会简单得多。如果你需要选中所有的无序列表,就用 ul { }
兼容性
- IE6+
- Firefox
- Chrome
- Safari
- Opera
6. X:visited and X:link
- a:link { color: red; }
- a:visted { color: purple; }
我们使用伪类:link来选中所有的可点击的锚点标签
如你所想,我们也可以使用伪类:visited来选中页面中已经被点击访问的锚点标签
兼容性
- IE7+
- Firefox
- Chrome
- Safari
- Opera
7. X + Y
- ul + p {
- color: red;
- }
这种选择器也叫相邻选择器,它选中的只是前面那个选择器里面最前的一个元素,比如上述表达,只有ul选择器里面的第一个p选择器里面的内容才能改变颜色,其他的不行。
兼容性
- IE7+
- Firefox
- Chrome
- Safari
- Opera
8. X > Y
- div#container > ul {
- border: 1px solid black;
- }
标准的X Y和X > Y的区别在与后者只选中直系的子元素,比如下面
- <div id="container">
- <ul>
- <li> List Item
- <ul>
- <li> Child </li>
- </ul>
- </li>
- <li> List Item </li>
- <li> List Item </li>
- <li> List Item </li>
- </ul>
- </div>
#container > ul
选择器只会选中id为container的div里面的直接子元素ul,而不会选中像例子中的那个<li>标签里面的子元素<ul>
因此,使用子选择符具有性能优势,事实上,当使用基于CSS选择器引擎的Javascript时,特别推荐使用子选择符。
兼容性
- IE7+
- Firefox
- Chrome
- Safari
- Opera
9. X ~ Y
- ul ~ p {
- color: red;
- }
这个选择符跟X + Y相似,不过它相对没有那么严格,他会选中ul中所有的p元素
兼容性
- IE7+
- Firefox
- Chrome
- Safari
- Opera
10. X[title]
- a[title] {
- color: green;
- }
属性选择器,在上面的例子中,这个将会选择带有title属性的锚点标签a。
兼容性
- IE7+
- Firefox
- Chrome
- Safari
- Opera
11. X[href="foo"]
- a[href="http://net.tutsplus.com"] {
- color: #1f6053; /* nettuts green */
- }
这个选择器可以为所有连接指向http://net.tutsplus.com的锚点标签a添加样式。而其他的则不会受影响
记住在使用基于CSS选择器引擎的javascript中也使用这些选择器,如果可能,在非正式的方法中经常使用CSS3选择器。
这个选择器可以起到很好的作用,但是他却是很严格的,如果一个连接是指向Nettuts+的,但是他的路径确实nettuts.com或者一个完整的url连接,在这种情况下,我们可以使用一些正则表达语法。
兼容性
- IE7+
- Firefox
- Chrome
- Safari
- Opera
12. X[href*="nettuts"]
- a[href*="tuts"] {
- color: #1f6053; /* nettuts green */
- }
对所有包含“tuts”的路径添加样式
兼容性
- IE7+
- Firefox
- Chrome
- Safari
- Opera
13. X[href^="http"]
- a[href^="http"] {
- background: url(path/to/external/icon.png) no-repeat;
- padding-left: 10px;
- }
为连接路径以“http”开头的元素对象添加样式
我们搜索“http”而不搜索“http://”是因为这样没必要,也因为这样说明不了那些以“https:”开头的连接
兼容性
- IE7+
- Firefox
- Chrome
- Safari
- Opera
14. X[href$=".jpg"]
- a[href$=".jpg"] {
- color: red;
- }
我们使用正则表达符 $
,来关联一个字符串的末尾。我们使用这个选择器来选中以“.jpg”结尾的元素对象,那些.png,.gif则不受影响
兼容性
- IE7+
- Firefox
- Chrome
- Safari
- Opera
15. X[data-*="foo"]
- a[data-filetype="image"] {
- color: red;
- }
我们要怎样才能选中以jpg、jpeg、png和gif结尾的元素对象呢?
- a[href$=".jpg"],
- a[href$=".jpeg"],
- a[href$=".png"],
- a[href$=".gif"] {
- color: red;
- }
这样效率很低,解决办法是在每一个图片锚点后加上文件的数据类型:image,用选择器a[data-filetype="image"]即可
- <a href="path/to/image.jpg" data-filetype="image"> Image Link </a>
- a[data-filetype="image"] {
- color: red;
- }
兼容性
- IE7+
- Firefox
- Chrome
- Safari
- Opera
16. X[foo~="bar"]
- a[data-info~="external"] {
- color: red;
- }
- a[data-info~="image"] {
- border: 1px solid black;
- }
所有带有external属性值data-info的,都可以添加指定的样式
- "<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>
- /* Target data-info attr that contains the value "external" */
- a[data-info~="external"] {
- color: red;
- }
- /* And which contain the value "image" */
- a[data-info~="image"] {
- border: 1px solid black;
- }
兼容性
- IE7+
- Firefox
- Chrome
- Safari
- Opera