css中的选择器

参考自： http://www.w3school.com.cn/cssref/css_selectors.asp

　　在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。

　　"CSS" 列指示该属性是在哪个 CSS 版本中定义的。（CSS1、CSS2 还是 CSS3。）

　　对于:first-clild及相关的选择器的理解。

　　首先：表示伪类，其次我们需要知道:first-child一定使用在子元素上的，:也可以看作过滤的意思，那么这个选择器的使用就必须就是 父元素子元素：first-child （其他类似）下面举例说明：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>:first-child</title>
    <style>
        .parent-ele p:first-child {
            color: red;
        }

        .parent-ele p:last-child {
            color: blue;
        }

        .parent-ele p:nth-child(2) {
            color: green;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="parent-ele">
        <p>这是第一个段落</p>
        <p>这是第二个段落</p>
        <p>这是第三个段落</p>
        <p>这是第四个段落</p>
        <p>这是第五个段落</p>
    </div>
</body>
</html>

　　最终的效果如下所示：

　　css3中新增了一个伪元素选择器 ::selection ,这个选择器的作用是作用于用户选中的文本，官网介绍。

　　使用方法如下：

::selection
{
color:#ff0000;
}

::-moz-selection
{
color:#ff0000;
}

　　该属性所有的浏览器都支持，知识ff需要使用-moz-前缀。

　　例子如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>selection</title>
    <style>
        ::selection {
            color: red;
            background-color: blue;
        }
        ::-moz-selection {
            color: red;
            outline: 10px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="text">
        lild及相关的选择器的理解。 首先：表示伪类，其次我们需要知道:first-child一定使用在子元素上的，:也可以看作过滤的意思，那么这个选择器的使用就...在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。 "CSS" 列指示该属性是在哪个 CSS 版本中定义的。（CSS1、CSS2 还是 CSS3
    </div>
</body>
</html>

最后的效果如下：

下面的这个例子是重复的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>testChild</title>
    <style>
        .wrap p:first-child {
            color: red;
        }
        .wrap p:last-child {
            color: blue;
        }
        .wrap p:nth-child(2) {
            /*这里的n是从1开始的，所以这里2就是指子元素中的第二个*/
            color: green;
            font-size: 25px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <p class="son">p元素</p>
        <p class="son">p元素</p>
        <p class="son">p元素</p>
        <p class="son">p元素</p>
        <p class="son">p元素</p>
    </div>
</body>
</html>

最终的效果如下：

下面的例子是:nth-child(2n) 的使用方法（注意：在这里第一个元素是1而不是0）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>testChild</title>
    <style>
        .wrap p:nth-child(2n) {
            color: red;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <p class="son">p元素</p>
        <p class="son">p元素</p>
        <p class="son">p元素</p>
        <p class="son">p元素</p>
        <p class="son">p元素</p>
    </div>
</body>
</html>

最终的结果如下所示：

注意：nth-child(2n)的效果和nth-child(even)的效果是相同的。都是偶数的子元素被选中。而nth-child(odd)是奇数的子元素被选中。

不难想象nth-child(3n+1)和nth-child(3n+2)的作用，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>testChild</title>
    <style>
        .wrap p:nth-child(3n+1) {
            color: red;
        }
        .wrap p:nth-child(3n+2) {
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <p class="son">p元素</p>
        <p class="son">p元素</p>
        <p class="son">p元素</p>
        <p class="son">p元素</p>
        <p class="son">p元素</p>
        <p class="son">p元素</p>
        <p class="son">p元素</p>
    </div>
</body>
</html>

效果如下：

即虽然元素的第一个是序号1，但是其中的n值还是可以取0的。