浅谈CSS/jQuery/JS选择器（一）

写作目的：

1
2
3
想要操作DOM中的元素，最基本的是把他们准确的选择出来。
而选择的办法有很多种，要为元素设置样式，可以通过css选择器来选择。
要实现程序逻辑，可以用JS把元素选择出来，也可以用更强大的jQuery选择器。

CSS选择器

概览

Alt text
Alt text

详解

div p && div>p && div+p

以上是所有css选择器的用法。其中有一些容易混淆，我们来看下面几个例子就会明白其中区别。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!-- 这是HTML代码 -->
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>用来测试各种写法的选择器</title>
    <link href="selector.css" type="text/css" rel="stylesheet">
</head>
<body>
    <h1 class="navbar">测试各种选择器 这是HI</h1>
    <p>选择器有很多种P</p>
    <div>DIV
        <p>P</p>
        <div>DIV
            <p>P</p>
            <h2>h2</h2>
        </div>
        <div>DIV</div>
        <p>p</p>
        <p>P</p>
    </div>
    <div>DIV<h1>h1<p>p</p></h1></div>
    <div>DIV<p>P</p></div>
    <p>p</p>
</body>
</html>

以上是html代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/*这是CSS代码*/
* :not(body) {
    margin: 3px;
    padding: 10px;
    border: solid 1px black;
}
div p{
    border-color: red;
}
div > p{
    background-color: aquamarine;/*天蓝色*/
}
div + p {
    background-color: greenyellow;
}

以上为CSS样式，为了便于观察，我们给所有除了Body的元素全部加上了边框

用div p选择所有div 元素内部的p元素，结果如下图：
Alt text

这是div > p的结果，我们把它的背景色设置为浅蓝，结果如下：
Alt text
最后，我们来看div + p的结果：
Alt text

通过例子，以上三个选择器的区别一目了然。

:first-child && :first-of-type

这两个也是存在细微差别的，看下面例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>用来测试各种写法的选择器</title>
    <link href="selector.css" type="text/css" rel="stylesheet">
</head>
<body>
    <ul>ul
       <li>li
        <ol>ol
            <li>li</li>
            <li>li</li>
            <li>li</li>
        </ol>
    </li>
    <li>li
        <ol>ol
            <li>li</li>
            <li>li</li>
        </ol>
    </li>
    <li>li</li>
    <li>li</li>
   </ul>
   <ul>ul
    <li>li</li>
    <li>li</li>
    <li>li</li>
   </ul>
</body>
</html>

css样式如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
* :not(body) {
    margin: 3px;
    padding: 10px;
    border: solid 2px black;
}
ul,ol {
    list-style: none;
}
li:first-child {
    border-color: yellow;
}
li:first-of-type {
    background-color: pink;
}

结果如下：
Alt text

注意：这种选择器前面的元素必须紧跟分号，不然选出来的就不是我们想要的结果。即： li:first-child