JavaScript（4）——CSS选择的艺术

常用常见的选择器：

类选择器[ .class ]，id选择器[ #id ]，全局选择器[ * ]，元素选择器[ element ]

根据层次关系定位：

(1) element, element

例如:　　div, p 　　【选择：所有的div 和 p】

JavaScript（4）——CSS选择的艺术

(2) element element

例如:　　div p 　　【选择：所有div中的 p】

JavaScript（4）——CSS选择的艺术

(3) element > element

例如:　　div>p　　【选择：所有父节点是div的p】

JavaScript（4）——CSS选择的艺术

（4）element + element

例如:　　div + p　　【选择：紧邻在div标签之后的一个p标签】

JavaScript（4）——CSS选择的艺术

（5）element ~ element

例如:　　div ~ p　　【选择:在div标签之后的所有p标签】

JavaScript（4）——CSS选择的艺术

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="selector.css">
</head>
<body>
    <div>div
        <p>p</p>
    </div>
    <p>p</p>
    <p>p</p>
    <div>div
        <div>div 
            <p>p</p>
        </div>
    </div>
    <div>div 
        <span>span
            <p>p</p>
        </span>
    </div>
    <span>span</span>
    <p>p</p>
</body>
</html>

selector.html