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"的样式。
需要注意的是，选择器的中间的空格
几种选择器的优先级关系
优先级
图中数字表示权重，优先级记住就行。
网友评论