移动端工程师学习javascrip的笔记和归纳，内容非常基础。
CSS定义
层叠样式表(Cascading Style Sheets，缩写为 CSS)，是一种 样式表 语言，用来描述 HTML 文档的呈现 (美化内容)
CSS引入方式
1、内部样式表：学习使用
- CSS代码写在
style标签里
2、外部样式表：开发使用
- CSS代码写在单数的CSS文件中（.css）
- 在HTML使用
link标签引入
<link rel="styleshhet" href="./my.css">
3、行内样式：配合JavaScript使用
- CSS写在标签的
style属性值里
<div style="color:red;font-size:20px;">这是div标签</div>
基础选择器
作用：查找标签，设置样式
标签选择器
使用标签名作为选择器，选中同名标签设置相同的样式，无法差异化同名标签的样式
如：p，h1，div，a，img
类选择器
作用：查找标签，差异化设置标签的现实效果
步骤：
- 定义类选择器：
.类名(多词汇类名使用 - 隔开) - 使用类选择器：标签添加
class="类名" - 一个标签可以使用多个类名，class属性值写多个类名，用空格隔开
.blue-color {
color: blue;
}
id选择器
作用：查找标签，差异化设置标签的现实效果
场景：id选择器一般配合JavaScript使用，很少用来设置CSS样式
步骤：
- 定义类选择器：
#id名 - 使用类选择器：标签添加
id="id名" 同一个id选择器在一个页面只能使用一次
#red {
color: red;
}
通配符选择器
作用：查找页面所有标签，设置详情样式
通配符选择器： *，不需要调用，浏览器自动查找页面所有标签，设置相同的样式
一般页面开发初期，使用通配符选择器清除标签的默认设置
* {
color: blueviolet;
}
复合选择器
作用：由两个或多个基础选择器，通过不同的方式组合而成，更准确、更高效的选择目标元素
后代选择器
作用：选中某标签的后代元素
写法：父选择器 子选择器{CSS属性}， 父子选择器之间用空格隔开
<style>
div span {
color: red;
}
</style>
<div>
<span>这是div的儿子span</span>
<p><span>这是div的孙子span</span></p>
</div>
子代选择器
作用：选中某标签的子代元素
写法：父选择器>子选择器{CSS属性}， 父子选择器之间用>隔开
<style>
div>span {
color: red;
}
</style>
<div>
<span>这是div的儿子span</span>
<p><span>这是div的孙子span</span></p>
</div>
并级选择器
作用：选中多组标签，设置相同样式
写法：选择器1,选择器2,...,选择器N{CSS属性}，选择器之间用,隔开
<style>
span,
div,
p {
color: red;
}
</style>
<span>span标签</span>
<div>div标签</div>
<p>p标签</p>
交集选择器
作用：选中同时满足多个条件的标签
注意：如果交集选择器中有标签选择器，标签选择器必须写在最前面
<style>
p.box {
color: red;
}
</style>
<!-- p标签 类选择器变红 -->
<p class="box">p标签 类选择器</p>
<p>p标签</p>
<div class="box">div标签 类选择器</div>
伪类选择器
伪类表示元素状态，选中的元素的某个状态设置样式
鼠标悬停状态：选择器:hover{CSS属性}
<style>
div:hover {
color: blue;
}
</style>
<div>div标签 类选择器</div>
超链接有四个状态，如果要给超链接设置四种状态，需要按LVHA的顺序书写
| 选择器 | 作用 |
|---|---|
| :link | 访问前 |
| :visited | 访问后 |
| :hover | 鼠标悬停 |
| :active | 点击时（激活） |
<style>
a:link {
color: red;
}
a:visited {
color: green;
}
a:hover {
color: purple;
}
a:active {
color: orange;
}
</style>
工作中，一个a标签选择器设置超链接的样式，hover状态特殊设置
<style>
a {
color: red;
}
a:hover {
color: purple;
}
</style>
