1：属性选择器
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
属性选择器：属性是相对于标签而言的。所谓属性选择器就是根据指定名称的属性的值来查找元素
1：E[attr]:查找拥有attr属性的E标签
2：E[attr=value]:查找拥有指定的attr属性并且值为value的E标签，等于为严格匹配
3：E[attr*=value]:查找拥有指定的attr属性并且值包含(可以在任何位置，有就行)value的E标签
4：E[attr^=value]:开始
5：E[attr$=value]:结束
</body>
</html>
2：兄弟伪类
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.first{
color: red;
}
.first + li{
color: blue;
}
.first ~ li{
color: yellow;
}
</style>
</head>
<body>
<!--兄弟伪类-->
<!--+：获取当前元素的相邻的满足条件的元素(指定类型的元素要是li全是li)-->
<!--~：获取当前元素满足条件的所有兄弟元素-->
<li class="first">大数据</li>
<span>看看能不能</span>
<li>JavaScript</li>
<li>人工智能</li>
<li>php</li>
</body>
</html>
3：相对于父元素的结构伪类
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
li:first-of-type
</style>
</head>
<body>
相对于父元素的结构伪类
E:first-child:查找E元素的父级中的第一个E元素
1：相对于当前指定元素的父级
2：查找的类型必须是指定的类型
这样的查找属于半盲查找，你只是可以找到E的第一个元素，
但是不会筛选是不是li，如果是就生效，如果不是就不生效。
这样当你后续添加了其他的标签，他就失效了
E:first-of-type{}
查找的时候只会查找满足条件的类型的元素，过滤掉其他类型的元素
E:nth-child
指定索引位置(从1开始的索引||关键字||表达式) even偶数，odd奇数(1234679。。。)
E:nth-of-type{}
指定类型，并且筛选
E:nth-of-type(n) 从1开始的索引
E:nth-of-type(even)关键字
E:nth-of-type(odd)关键字
E:nth-of-type(-n+5)表达式n从0开始，(从头开始) E:nth-last-of-type(-n+5)表达式n从0开始，(从尾开始)
2n 2n+1 ，
0>>5
1>>4
2>>3
3>>2
4>>1
5>>0
当n<=0,取值无效
E:empty
没有任何内容，连空格都没有
E:target
</body>
</html>
4：伪元素选择器
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
margin: 200px;
}
div:nth-of-type(1) {
width: 300px;
height: 200px;
background: red;
float: left;
}
div:nth-of-type(2) {
width: 200px;
height: 200px;
background: blue;
float: left;
position: relative;
}
div:nth-of-type(2)::before {
content: "";
/*content必须写，否则后期不可见*/
/*默认情况下是行内元素，需要转化为块级元素，才能设置宽高，disply：block；float，position*/
width: 20px;
height: 20px;
border-radius: 10px;
background: #ffffff;
position: absolute;
top: -10px;
left: -10px;
}
div:nth-of-type(2)::after {
content: "";
/*content必须写，否则后期不可见*/
/*默认情况下是行及元素，需要转化为块级元素，才能设置宽高，disply：block；float，position*/
width: 20px;
height: 20px;
border-radius: 10px;
background: #ffffff;
position: absolute;
bottom: -10px;
left: -10px;
}
</style>
</head>
<body>
<!--：before ：after-->
<!--1：他的功能完全等价dom元素-->
<!--2：不会在dom树中生成(后续js不能对他进行操作)-->
<div></div>
<div></div>
</body>
</html>
5：安卓机器人
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.content {
width: 500px;
height: 500px;
margin: 0 auto;
border: 1px solid #000;
}
.an_header {
width: 250px;
height: 125px;
background-color: green;
margin: 0 auto;
border-radius: 125px 125px 0 0;
position: relative;
margin-bottom: 10px;
position: relative;
}
.an_header::before, .an_header::after {
content: "";
width: 20px;
height: 20px;
background-color: #fff;
position: absolute;
border-radius: 10px;
}
.an_header::before {
top: 70px;
left: 60px;
}
.an_header::after {
bottom: 36px;
right: 62px;
}
.an_body {
width: 250px;
height: 250px;
background-color: green;
border-radius: 0px 0px 20px 20px;
margin: 0 auto;
position: relative;
}
.an_body::before, .an_body::after {
content: "";
width: 32px;
height: 180px;
background-color: green;
position: absolute;
border-radius: 15px;
}
.an_body::before {
top: 30px;
left: -47px;
}
.an_body::after {
top: 30px;
right: -47px;
}
.an_footer {
width: 250px;
height: 110px;
background-color: #fff;
margin: auto;
position: relative;
}
.an_footer::after, .an_footer::before {
content: "";
position: absolute;
width: 30px;
height: 90px;
background-color: green;
border-radius: 5px;
}
.an_footer::after {
left: 30px;
}
.an_footer::before {
right: 30px;
}
</style>
</head>
<body>
<div class="content">
<div class="an_header"></div>
<div class="an_body"></div>
<div class="an_footer"></div>
</div>
</body>
</html>
