id重温
•1.<a herf '#' xxx> </a>#占位符，以后跳转到哪里不确定，所以在herf后面加了#，但是如果不加‘herf’，就会没链接效果。
•2.图片必须放img文件夹里。css文件夹放css文件等。
•3.<a href="http://www.baidu.com" id="down">联系我们 可以靠id进行位置选择
•4.id属性在同一个网页只能有一个，不能重名，因为id唯一。
但是也可以用name，但是区别在于name可以重名，有重复，但是id唯一。
•4.<a href="#">回到顶部</a>
自动跳到顶部
style 样式
内部样式表
定义：也可以将CSS样式编写到head中的style标签里，称为内部样式表
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
p{
color: red;
float-size:20px
}
</style>
</head>
<body>
<p>hello world</p>
</body>
</html>
最推荐样式，外部样式表：
<link rel="stylesheet" type="text/css" href="style.css" />
内联样式
style 内联样式，只对元素有作用。
定义：可以将CSS样式编写到元素的style属性当中，这种样式称为内联样式
css.png
1、多个样式；链接。
2、缺点： 不复用，所以不推荐。
3、CSS和html分开写，所以不推荐。
结果 ：内部样式表 （推荐 不是最推荐）
推荐外部样式表
4、 <style type='text/css'>兼容低版本浏览器
5、 css里面不能加html语法 标签
6、 / / css 注释
7、 选择器 声明块。
p{color：red；}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS</title>
<!--
也可以将CSS样式编写到head中的style标签里，称为内部样式表
将样式表编写的style标签中，然后通过CSS选择器选中指定元素
然后可以同时为这些元素一起设置样式，这样可以使样式进一步的复用
将样式表编写到style标签中，也可以使表现和结构进一步分离，它也是我们推荐的使用方式
<style type="text/css">
p{
color:red;
font-size:40px;
}
</style>
-->
<!--
还可以将样式表编写到外部的CSS文件中，然后通过link标签来将外部的CSS文件引入到当前页面中
这样外部文件中的CSS样式表将会应用到当前页面中
将CSS样式统一编写到外部的样式表中，完全使结构和表现分离，可以使样式表在不同的页面中使用
最大限度地使样式可以进行复用，将样式统一写在样式表中，然后通过link标签引入
可以利用浏览器的缓存，加快用户访问的速度，提高了用户体验
所以在开发中我们最推荐使用的方式就是外部的CSS文件
-->
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<!--
可以将CSS样式编写到元素的style属性当中，这种样式称为内联样式
内联样式只对当前的元素中的内容起作用，内联样式不方便复用
内联样式属于结构与表现耦合，不方便后期的维护，不推荐使用的
<p style="color:red;font-size:40px;">床前明月光，疑是地上霜</p>
<p style="color:red;font-size:40px;">举头望明月，低头思故乡</p>
-->
<p>举头望明月，低头思故乡</p>
<p>举头望明月，低头思故乡</p>
<p>举头望明月，低头思故乡</p>
</body>
</html>
快捷键
！tab 出来结构
h1 直接补全
ctrl 回车 下一行
ctrl shift 回车 上一行
h28出8个h2
ctrl alt 上下箭头多行选择
ul>(li>a)4 >包含
ctrl shift d 复制
p#p$*4 #（id）
<p id="p1"></p>
<p id="p2"></p>
<p id="p3"></p>
<p id="p4"></p>
ctrl shfit k 删除
块
**块元素 独占一行 div p h1-h6 ui li等
内联元素（行内元素）只占自身大小，不独占一行 span a img iframe
用块包含内联 而不能内联包含块 除了 a（除了包含自己）可以包含任意元素
p不能包含别的块 。 div等别的块可以包含别的块div等·别的块**
常用选择器：
元素选择器:标签名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
p{
color: red;
float-size:20px
}
</style>
</head>
<body>
<p>hello world</p>
</body>
</html>
id选择器:#id属性值{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
#p1{
color: red;
float-size:20px
}
</style>
</head>
<body>
<p id="p1">hello world</p>
</body>
</html>
类选择器：
.class属性值{}
id能完成class也可以完成，但是反过来不行。
可以设置多个样式，class=‘p2 hello’
可以同时为一个元素设置多个class属性值，多个值之间使用空格隔开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
.p1{
color: yellow;
float-size:20px
}
.p2{
color: yellow;
float-size:20px
}
</style>
</head>
<body>
<p class="p1 p2" >hello world</p>
</body>
</html>
选择器分组（并集选择器）
应用：多个选择器完成统一一样color ,size,背景
作用：通过选择器分组可以同时选中多个选择器对应的元素
选择器1，选择器2，选择器3{}
demo(多个选择器完成统一一样背景)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
p1,p2{
color: yellow;
float-size:20px;
background: red;
}
</style>
</head>
<body>
<p class="p1" >hello world</p>
<p1>hello world</p>
<p2>hello world</p>
</body>
</html>
通配选择器
所有东西都使用这个样式
*{}
demo(背景在内的全屏变红)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
*{
color: yellow;
float-size:20px;
background: red;
}
</style>
</head>
<body>
<p class="p1" >hello world</p>
<p1>hello world</p>
<p2>hello world</p>
</body>
</html>
复合选择器（可以选中同时满足多个元素）（交集选择器）
选择器1选择器2选择器N{}
（一般是class的）
id不建议使用复合选择器，本来就是唯一的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
p1.a{
color: yellow;
float-size:20px;
background: red;
}
</style>
</head>
<body>
<p class="p1" >hello world</p>
<p1 class = 'a'> hello world</p1>
<p2>hello world</p2>
</body>
</html>
demo(all chooser)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用选择器</title>
<style type="text/css">
为页面中的所有的p元素，设置一个字体颜色为红色*/
元素选择器
作用：通过元素选择器可以选择页面中的所有指定元素
语法：标签名{}
p{
color: red;
}
h1{
color: red;
}
id选择器
作用：通过元素的id属性值选中唯一的一个元素
语法：#id属性值{}
#p1{
font-size: 20px;
}
类选择器
作用：通过元素的class属性值选中一组元素
语法：.class属性值{}
.p2{
color: red;
}
.hello{
font-size: 50px;
}
为id为p1的元素，class为p2的元素，还有h1，同时设置一个背景颜色为黄色*/
选择器分组（并集选择器）
作用：通过选择器分组可以同时选中多个选择器对应的元素
语法：选择器1,选择器2,选择器N{}
#p1,.p2,h1{
background-color: yellow;
}
通配选择器
作用：可以用来选中页面中的所有的元素
语法：*{}
*{
color: red;
}
为拥有class为p3的span元素设置一个背景颜色为黄色
复合选择器（交集选择器）
作用：可以选中同时满足多个选择器的元素
语法：选择器1选择器2选择器N{}
span.p3{
background-color: yellow;
}
对于id选择器来说，不建议使用复合选择器
p#p1{
background-color: red;
}
</style>
</head>
<body>
<h1>悯农</h1>
<p>床前明月光</p>
<p>床前明月光</p>
<p id="p1">床前明月光</p>
<!--
我们可以为元素设置class属性
它和id属性类似，只不过class属性可以重复
拥有相同class属性值的元素，我们说他们是一组元素
可以同时为一个元素设置多个class属性值，多个值之间使用空格隔开
-->
<p class="p2 hello">床前明月光</p>
<p class="p2">床前明月光</p>
<p class="p2">床前明月光</p>
<p>床前明月光</p>
<p class="p3">床前明月光</p>
<span class="p3">疑是地上霜</span>
</body>
</html>
子元素和后代元素选择器
<div id="d1">
<span>我是div标签中的span</span>
<p><span>我是p标签中的span</span></p>
</div>
上图总结：祖先元素。span -->p div
后代元素选择器（只选择后代的元素 兄弟不包含）
•作用：选中指定元素的指定后代元素
•语法：祖先元素 后代元素{}
•结果：只要是 祖先元素的都变。二个的话就都变，用
•id选择就可以只选择一个
•选择器越短越好 3个一下
demo(二个都变)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
div span{
color: yellow;
float-size:20px;
background: red;
}
</style>
</head>
<body>
<div>
<span>
走走走
</span>
<p>
<span>
ggggo
</span>
</p>
</div>
</body>
</html>
子元素选择器
（选中父元素指定的子元素）
父元素 > 子元素（只能其子，孙不可以）ie6不支持
demo(只变第一个走，因为只有走为子元素。go为孙子)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
div > span{
color: yellow;
float-size:20px;
background: red;
}
</style>
</head>
<body>
<div>
<span>
走走走
</span>
<p>
<span>
ggggo
</span>
</p>
</div>
</body>
</html>
demo（all）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子元素和后代元素选择器</title>
<style type="text/css">
/*为div中的span设置一个颜色为绿色*/
/*
后代元素选择器
作用：选中指定元素的指定后代元素
语法：祖先元素 后代元素{}
*/
#d1 span{
color: greenyellow;
}
/*选中id为d1的div中的p元素中的span元素*/
#d1 p span{
font-size: 50px;
}
/*为div的子元素span设置一个背景颜色为黄色*/
/*
子元素选择器
作用：选中指定父元素的指定子元素
语法：父元素 > 子元素
IE6及以下的浏览器不支持子元素选择器
*/
div > span{
background-color: yellow;
}
</style>
</head>
<body>
<!--
元素之间的关系
父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素
后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素
兄弟元素：拥有相同父元素的元素叫做兄弟元素
-->
<div id="d1">
<span>我是div标签中的span</span>
<p><span>我是p标签中的span</span></p>
</div>
<div>
<span>我是body标签中的span</span>
</div>
</body>
</html>
伪类选择器（：开头的）
（链接（如百度和不知名网站）看过的和没看过的样式设置）
•：link 没访问过的链接 普通链接
•：visted 访问过的链接 （只能设置颜色 为了保护隐
私 ie6可以设置背景颜色其他的不行）
（通过历史记录所以判断访问没访问）
•：hover 鼠标移入的状态 别的标签也可以
•：active 超链接被点击的状态 i6不支持a以外的
伪类状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
a:link{
color: red;
}
a:visted{
color: yellow;
}
a:hover{
color: yellow;
}
a:active{
color: yellow;
}
</style>
</head>
<body>
<a class='abc' href="http://www.baidu.com">访问过的链接</a>
</body>
</html>
•input 设置文本输入框 ie6不支持
光标放到文本框，获取焦点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
input:focus{
background: yellow
}
</style>
</head>
<body>
<input type="text">
</body>
</html>
•：：selection选中元素（选中元素 原来字体能改变样式）
：：-moz-selection 兼容火狐浏览器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
p::selection{
background-color: yellow;
}
</style>
</head>
<body>
<p>选择内容会变色</p>
</body>
</html>
demo(all)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style type="text/css">
伪类专门用来表示元素的一种特殊的状态
比如：访问过的超链接、普通的超链接、获取焦点的文本框
当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类
为没访问过的链接设置一个颜色为绿色
:link 表示普通的链接（没访问过的链接）
a:link{
color: yellowgreen;
font-size: 50px;
}
为访问过的链接设置一个颜色为红色
:visited 表示访问过的链接
浏览器是通过历史记录来判断一个链接是否访问过
由于涉及到用户的隐私问题，所以使用:visited伪类只能设置字体的颜色
a:visited{
color: red;
}
:hover 表示鼠标移入的状态
a:hover{
color: skyblue;
}
:active 表示超链接被点击的状态
a:active{
color: black;
}
:hover和:active也可以为其它元素设置
IE6中，不支持对超链接以外的元素设置:hover和:active
p:hover{
background-color: gold;
}
p:active{
background-color: orange;
}
/*文本框获取焦点以后，修改背景颜色为黄色*/
input:focus{
background-color: yellow;
}
为p标签中选中的内容使用样式可以使用::selection伪类
注意：这个伪类在火狐中需要采用另一种方式编写
/*兼容大部分浏览器的*/
p::selection{
background-color: orange;
}
兼容火狐的
p::-moz-selection{
background-color: orange;
}
</style>
</head>
<body>
<a class="abc" href="http://www.baidu.com">访问过的链接</a>
<br /><br />
<a class="bcd" href="http://www.baidu123456.com">没访问过的链接</a>
<p>我是一个段落</p>
<!-- 使用input可以创建一个文本输入框 -->
<input type="text" />
</body>
</html>
伪元素，位置
•p：first-letter变第一个字
•p: first-line 第一行变
•p:before 是<p>和第一个字之间 centent‘’ 会显示在<p>和第一个字之间，并且选不中。
•p:after
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪元素</title>
<style type="text/css">
使用伪元素来表示元素中的一些特殊的位置*/
为p中第一个字符来设置一个特殊的样式*/
p:first-letter{
color: red;
font-size: 20px;
}
为p中的第一行设置一个背景颜色为黄色*/
p:first-line{
background-color: yellow;
}
:before表示元素最前边的部分
一般它都需要结合content这个样式一起使用
通过content可以向before或after的位置添加一些内容
:after表示元素最后边的部分
p:before{
content: "我会出现在整个段落的最前边";
color: green;
}
p:after{
content: "我会出现在整个段落的最后边";
color: orange;
}
</style>
</head>
<body>
<p>
秋夜 —鲁迅
在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。
这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地眨着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。
</p>
</body>
</html>
属性选择器
xx属性值 p属性
<p titke='xx'>（在鼠标到文字上，可显示提示文字）
p[属性名]选取含有指定元素的元素
p[title ^=‘ab’]以指定内容开头的元素
p[title $=‘c’]以指定内容结尾的元素
p[title *=‘c’]包含
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style type="text/css">
为所有具有title属性的p元素，设置一个背景颜色为黄色
属性选择器
作用：可以根据元素中的属性或属性值来选取指定元素
语法：
[属性名] 选取含有指定属性的元素
[属性名="属性值"] 选取含有指定属性值的元素
[属性名^="属性值"] 选取属性值以指定内容开头的元素
[属性名$="属性值"] 选取属性值以指定内容结尾的元素
[属性名*="属性值"] 选取属性值包含指定内容的元素
p[title]{
background-color: yellow;
}
为title属性值是hello的元素设置一个背景颜色为黄色
p[title="hello"]{
background-color: yellow;
}
为title属性值以ab开头的元素设置一个背景颜色为黄色
p[title^="ab"]{
background-color: yellow;
}
为title属性值以c结尾的元素设置一个背景颜色
p[title$="c"]{
background-color: yellow;
}
为title属性值包含c的元素设置一个背景颜色*/
p[title*="c"]{
background-color: yellow;
}
</style>
</head>
<body>
<!--
title属性，这个属性可以给任何标签指定
当鼠标移入到元素上时，元素中的title属性的值将会作为提示文字显示
-->
<p title="hello">我是一个段落</p>
<p>我是一个段落</p>
<p title="abbc">我是一个段落</p>
<p title="abccd">我是一个段落</p>
<p title="abc">我是一个段落</p>
</body>
</html>
子元素选择器
选中第一个p标签（第一行就给是）
只要是子元素，不论父元素是谁都可以
body>p：fist-child 只选择 body下的
p：fist-child 不写p相当于* （全家人去拍）
p：last-child （只认最后一个）
p：nth-child（3） 表示第几个 从1开始查询 只要父类第三个就可以 （odd奇数 even偶数 用于隔行变色）
fist-of-type只要是第一的的就变黄（大儿子小儿子去排）
last-of-type只要是最后的的就变黄
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
/*当p不是第一个元素时，执行无结果*/
p:first-child{
background-color: yellow;
}
p:last-child{
background-color: yellow;
}
/*当p不是最后一个元素时，执行无结果*/
p:nth-child(even){
background-color: yellow;
}
/*p:last-of-type{
background-color: yellow;
}*/
</style>
</head>
<body>
<p>我是一个p标签</p>
<span>我是span</span>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<span>我是span</span>
<p>我是一个p标签</p>
<!-- <div>
<p>我是一个p标签</p>
</div> -->
</body>
</html>
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子元素选择器</title>
<style type="text/css">
为第一个p标签设置一个背景颜色为黄色
:first-child 可以选中第一个子元素
:last-child 可以选中最后一个子元素
:nth-child 可以选中任意位置的子元素
该选择器后边可以指定一个参数，指定要选中第几个子元素
even 表示偶数位置的子元素
odd 表示奇数位置的子元素
body>p:first-child{
background-color: yellow;
}
p:last-child{
background-color: yellow;
}
p:nth-child(even){
background-color: yellow;
}
:first-of-type
:last-of-type
:nth-of-type
和child类似，只不过child是在所有的子元素中找
而type是在当前类型的子元素中找
p:first-of-type{
background-color: yellow;
}
p:last-of-type{
background-color: yellow;
}
</style>
</head>
<body>
<span>我是span</span>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<span>我是span</span>
<!-- <div>
<p>我是一个p标签</p>
</div> -->
</body>
</html>
兄弟元素选择器
span + p{} span后面紧挨着他的p。不挨着也会执行没结果。
span ~ p{} 选中后面所有的兄弟元素 不用挨着他的，只要后面的就可以。
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>兄弟元素选择器</title>
<style type="text/css">
为span后的一个p元素设置一个背景颜色为黄色
后一个兄弟元素选择器
作用：可以选中一个元素后紧挨着的指定的兄弟元素
语法：前一个 + 后一个
span + p{
background-color: yellow;
}
选中后边的所有兄弟元素
语法：前一个 ~ 后边所有
span ~ p{
background-color: yellow;
}
</style>
</head>
<body>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<span>我是一个span</span>
<div>我是div</div>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
</body>
</html>
否定伪类
把p都设置除了某个
p：not（.hello）剔除指定的
p：not（.#p1） 去除id=‘p1’的
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>否定伪类</title>
<style type="text/css">
为所有的p元素设置一个背景颜色为黄色，除了class值为hello的
否定伪类：
作用：可以从已选中的元素中剔除出某些元素
语法：
:not(选择器)
p:not(.hello){
background-color: yellow;
}
</style>
</head>
<body>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p class="hello">我是一个p标签</span>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
</body>
</html>
样式的继承
（类似儿子继承父亲）
父类变了，子类也变（设置给父类，子类也会有）
背景相关的不会继承
透明（为了露出底层）
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>样式的继承</title>
<style type="text/css">
body{
font-size: 30px;
}
</style>
</head>
<body>
像儿子可以继承父亲的遗产一样，在CSS中，祖先元素上的样式，也会被他的后代元素所继承
利用继承，可以将一些基本的样式设置给祖先元素，这样所有的后代元素将会自动继承这些样式
但是，并不是所有的样式都会被子元素所继承，比如：背景、边框、定位相关的样式都不会被继承
<div style="background-color: yellow;">
<p>
我是p标签中的文字
<span>我是span中的文字</span>
</p>
</div>
<span>我是p元素外的span</span>
</body>
</html>
选择器的优先级
（权重）
内联样式 1000（因为权限高，所以不推荐用它。但是想用它，在别的元素后面加 !important这样最高优先级，要避免这二种）
id选择器 100
类和伪类 10
元素选择器 1
通配 * 0
继承样式 没有优先级
多种元素优先级可以相加。
一样的优先级，选择后面的，前面的被覆盖。
并集选择器是单独计算的。（div只算div 不能和p比）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器的优先级</title>
<style type="text/css">
.p1{
background-color: yellow;
}
p{
background-color: red;
}
#p2{
background-color: yellowgreen;
}
p#p2{
background-color: red;
}
/*
当使用不同的选择器，选中同一个元素时，并且设置相同的样式时，这时样式之间产生了冲突，最终到底采用哪个选择器定义的样式，由选择器的优先级（权重）决定，优先级高的优先显示
优先级的规则
内联样式，优先级1000
id选择器，优先级100
类和伪类，优先级10
元素选择器，优先级1
通配*，优先级0
继承的样式，没有优先级
当选择器中包含多种选择器时，需要将多种选择器的优先级相加，然后再比较
但是注意，选择器优先级计算不会超过他的最大的数量级
如果选择器的优先级一样，则使用靠后的样式
并集选择器的优先级是单独计算的
div, p, #p1, .hello{}
可以在样式的最后添加一个!important，则此时该样式将会获取一个最高的优先级，将会优先于所有的样式显示，甚至超过内联样式，但是在开发中，尽量避免使用!important
*/
*{
font-size: 50px;
}
p{
font-size: 30px;
}
.p3{
color: green;
}
.p1{
color: yellow;
background-color: skyblue !important;
}
</style>
</head>
<body>
<p class="p1 p3" id="p2" style="background-color: orange;">
我是一个段落
<span>我是p标签中的span</span>
</p>
</body>
</html>
a的伪类
active 放在hover前面 active被覆盖了 没用了
lvha的顺序写。
简记：爱与恨。
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>a的伪类</title>
<style type="text/css">
/*
涉及到a的伪类一共有四个
:link
:visited
:hover
:active
而这四个选择器的优先级是一样的
*/
a:link{
color: yellowgreen;
}
a:visited{
color: red;
}
a:hover{
color: orange;
}
a:active{
color: cornflowerblue;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">访问过的链接</a>
<a href="http://www.baidu123456.com">未访问过的链接</a>
</body>
</html>
1.plate (plate 元素)
2.bento (bento 元素)
3.#fancy （id 元素）
4.plate apple (后代元素)
5.#fancy pickle后代元素选择器
6..small,plate apple类选择器
7.orange.small
8.bento orange
9.plate,bento,div
10.*通配选择器sz
11.plate *后代元素选择器 .plate 中所有，不是包含
12.plate+apple兄弟元素选择器
13.bento~pickle兄弟元素选择器
14.plate>apple子元素选择器
15.orange:first-child子元素选择器
16.apple:only-child,pickle:only-child
17.apple:last-child,pickle:last-child子元素选择器
18.plate:nth-child(3)子元素选择器
19.bento:nth-last-child(4)子元素选择器
20.apple:first-of-type子元素选择器
21.plate:nth-of-type(even)子元素选择器
22.plate:nth-of-type(3),plate:nth-of-type(5)
23.apple:only-of-type子元素选择器 只有苹果
24.orange.small:last-of-type,apple.small:last-of-type
25.bento:empty 子元素选择器 子元素为空
26.apple.not(.small) 否定伪类 去除small类
