DOM

在学习选择器之前，我们先来了解一下DOM，DOM是什么呢？第一次学DOM的时候我一脸懵逼，现在重新学了一遍后，有了新的理解，DOM就是一个树状结构的对象模型，每个结点都有它对应的一些属性，我们可以通过CSS与这些属性对应起来，也可以通过JS来灵活的操控这些对应属性下的content。

DOM，Document Object Model，文档对象模型
在HTML页面里，浏览器根据<body>和里面所有的标签，建立一个树形结构。<body>下的每个节点，称为元素Element，例如

<html>
    <head>
        <meta charset="UTF-8">
        <title>test</title>
    </head>
    <body>
        <p>
            <a href="index.html"></a>
        </p>
        
        <p>
            <img src="img/itelitesicon.png" />
        </p>
        
    </body>
</html>

则它的DOM树状结构是

DOM树状结构

元素的通用属性

元素都有一些属性，以方便我们去操作它，常用的属性有：
id：给该元素设置一个全局唯一的ID
name：给该元素设置一个名字
class：设置样式类名
style：设置临时样式
........
示例：<img id="logo" .../>,我们以后会经常用到这些属性。

注意

DOM指的是<body>内的树状标签组合而成的树状结构对象模型，不要把显示的内容放在<body>之外。

选择器 Selector

我们主要学习常用的几种选择器，包括：

类选择器 Class Selector
ID选择器 ID Selector
标签类型选择器 Type Selector
子选择器 Descendant Selector
伪类选择器 Pseudo-Class Selector

类选择器 Class Selector

示例：

.my-button{
}

用于指定所有的class="my-button"的元素的样式
如：

<html>
    <head>
        <meta charset="utf-8" />
        <title>Test0116</title>
        <style>
            .my-button{
                padding: 8px;
                border: 1px solid silver;
                border-radius: 6px;
                font-size: 12px;
                color: #444;
                background-color: #f1f1f1;
                min-width: 60px;
            }           
            .my-button-default{
                background-color: #0078D7;
                color: #F1F1F1;
                border-color: #F1F1F1;
            }
        </style>
    </head>
    <body>
        <!-- 此处通常使用div标签 -->
        <p>
            <button class="my-button">新建</button>
            <button class="my-button">删除</button>
            <button class="my-button">添加图片</button>
            <button class="my-button">添加链接</button>
        </p>
        <p>
            <textarea style="width: 400px; height: 200px;"></textarea>
        </p>
        <p>
            <button class="my-button">放弃编辑</button>
            <button class="my-button"> 发布 </button>
        </p>
    </body>
</html>

效果图

可以发现，凡是使用了class="my-button"的button的样式，都得到了修改。

一个元素也可以指定多个class
示例：<button class="my-button my-button-default"> 发布 </button>
规则：

定义多个样式
指定样式时，以空格分开

如以上的代码，如使用这样的修改，

效果图

可以发现，这个标签都具有两个样式，但.my-button-default的重复部分把.my-button的重复部分覆盖掉了，这就涉及到两个类选择器的优先级的问题。
通过调试<button class="my-button my-button-default">和<button class="my-button-default my-button">，我们发现，这两种的顺序并不时影响优先级的原因，正如上一节所说的就近原则一样，在这里我们也可以看作，哪个样式离本标签最近，那个样式的优先级就高（这样方便理解和记忆）。也可以直接记住，<style>标签中，越靠后的样式，优先级越高（只针对于类选择器）。

标签类型选择器 Type Selector

统一设定某种标签的样式，例如：

button{
}

意思是所有的button标签都是对应的该样式。
也可以与类选择器结合使用，例如：

button.my-default{
}

表示标签类型为<button>并且class="my-default"的元素。
如：

<html>
    <head>
        <meta charset="utf-8" />
        <title>Test0116</title>
        <style>
            button{
                padding: 8px;
                border: 1px solid silver;
                border-radius: 6px;
                font-size: 12px;
                color: #444;
                background-color: #f1f1f1;
                min-width: 60px;
            }
            
            button.my-default{
                background-color: #0078D7;
                color: #F1F1F1;
                border-color: #F1F1F1;
            }
        </style>
    </head>
    <body>
        <!-- 此处通常使用div标签 -->
        <p>
            <button>新建</button>
            <button>删除</button>
            <button>添加图片</button>
            <button>添加链接</button>
        </p>
        <p>
            <textarea style="width: 400px; height: 200px;"></textarea>
        </p>
        <p>
            <button>放弃编辑</button>
            <button class="my-default"> 发布 </button>
        </p>
        
    </body>
</html>

显示效果

ID选择器 ID Selector

ID选择器，因为每个元素都可以设置一个唯一的id属性，例如：<button id="ok">，通常来说，为了避免id重复，一般命名应该较长一些，例如：editor-ok-button、editor-cancel-button。有了id属性，可以设置该指定的id的样式

<html>
    <head>
        <meta charset="utf-8" />
        <title>Test0116</title>
        <style>
            button{
                padding: 8px;
                border: 1px solid silver;
                border-radius: 6px;
                font-size: 12px;
                color: #444;
                background-color: #f1f1f1;
                min-width: 60px;
            }
            
            #ok{
                background-color: #0078D7;
                color: #F1F1F1;
                border-color: #F1F1F1;
            }
        </style>
    </head>
    <body>
        <!-- 此处通常使用div标签 -->
        <p>
            <button>新建</button>
            <button>删除</button>
            <button>添加图片</button>
            <button>添加链接</button>
        </p>
        <p>
            <textarea style="width: 400px; height: 200px;"></textarea>
        </p>
        <p>
            <button>放弃编辑</button>
            <button id="ok"> 发布 </button>
        </p>
        
    </body>
</html>

效果图如上(一样的)，在这里需要注意的是，id选择器的优先级要比标签选择器高！

伪类选择器 Pseudo-Class Selector

伪类选择器，是为元素的每一种状态定义一个样式，常用的状态有如下

xxx
普通状态显示
xxx:hover
鼠标移上去时的状态显示
xxx:active
鼠标按下时的状态显示
xxx:focus
焦点状态下的状态显示

其中,xxx可以是ID/class/Type Selector均支持，例

#ok{
    background-color: #0078D7;
    color: #F1F1F1;
    border-color: #F1F1F1;
}
#ok:hover{
    
}

当鼠标移上去时，为添加hover中的样式。一般情况下active状态和focus状态的作用相当。（更多状态可参考W3School上的）

子选择器 Descendant Selector

根据DOM对象模型，我们知道，一个标签下面还可以有多个标签，我们可以设定父元素下的子元素，例如：
#login-panel button{ }
设置在id="login-panel的元素下的所有<button>的样式。
.xxx .yyy .zzz{ }
设置在class="xxx"下的子元素class="yyy"下的为class="zzz"的样式。
需要注意的是，选择器的中间的空格

几种选择器的优先级关系

优先级

图中数字表示权重，优先级记住就行。

前端基础之选择器Selector（4）