30个CSS选择器(updating)

1、*：通用选择器

针对初学者来说，我们还是从简单的开始学起，首先我们来认识下通用选择器，然后再逐步深入学习其它高级的选择器，假如我们想让文档中的每个元素都显示成红色，我们可以这么做：

* {color:red;}

通用选择器，可以匹配页面所有的元素。 许多开发者可能会用这个技巧如下代码所示让元素居中，在开发测试阶段固然是好的，但是我不建议这么做，因为这样做会给浏览器增加很大的负担。

* {
 margin: 0;
 padding: 0;
}

2、#X：ID选择器

ID选择器的开头使用#号，但是你在使用的时候，
id选择器比较局限，不能重用。因此需要慎重考虑。

#container {
 width: 960px;
 margin: auto;
}

3、.X：类选择器

类选择器的开头用 .（点）进行表示。与ID选择器的区别就是可以重用。定义多个元素的样式，好比按组进行归类，同一类的样式统一定义。

.error {
color: red;
}

如果把两个类串在一起，选择的就是同时具有两个类名的元素，类名的顺序则无所谓，比如 class=“urgent warning” , css 选择器你也可以这样写 .warning .urgent。

4、X Y：后代选择器

后代选择器，英文名称：descendant selector，本文的开头我们学习了什么是后代元素，比如我们要选择在li元素中包含a标签的链接（不是文档中所有的链接），取消下划线的默认样式，我们可以这样代码实现：

li a {
text-decoration: none;
}

5、X：元素选择器

假如你想针对Html预定义的标签，比如类似：p,h3,em,a这些标签，我们可以快速为某类标签定义样式。如下段代码所示：

a { color: red; }
ul { margin-left: 0; }

6、X:visited and X:link ：链接伪类选择器

:link 伪类来定义所有还没有点击链接的样式，:visited 伪类定义我们曾经点击过或者访问过的链接样式，示例代码如下：

a:link { color: red; }
a:visted { color: purple; }

7、 X + Y：紧邻同胞选择器

在同一个父元素中，选择相邻的同级别的元素，我们可以使用紧邻同胞选择器（adjacent selector）。如若想把紧跟在h1元素的段落上外边距去掉，你可以这么写：

h1 + p { margin-top:0 }

8、 X > Y：子元素选择器

有时候我们并不想选择所有的后代元素，而是想缩小范围，只选择一个元素的子元素，比如我们只想选择 #container>ul 定义id为container的div里的ul元素，而不是更深的后代元素比如li里的ul。
html文档结构：

<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>

css代码如下:

div#container > ul {
border: 1px solid black;
}

9、 X ~ Y：后续同胞选择器

后续同胞选择器使用 ~ 表示，选择一个元素后面同属一个父元素的另一个元素。这个选择器和 X + Y 很像，但没那么严格。后续同胞选择器应用会更广泛。比如下面这个例子，我们选择所有ul后面的P元素。
html文档结构：

   <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>

      <p><a href="#" title="title">consectetur</a>  </p>
      <p>consectetur </p>
      <p><a href="#">adipisicing</a></p>
      <p>adipisicing </p>
   </div>

css代码如下:

ul ~ p {
color: red;
}

10、 X[title]：简单属性选择器

如果想选择具有某个属性的元素，而不管属性的值是什么，我们可以使用简单属性选择器。例如想让带有title属性的链接标签才会被匹配，没有title属性的标签不会受到影响。你可以这么写代码：

a[title] {
 color: green;
}