、一，子元素和后代元素选择器
<style type="text/css">
#d1 span{ div定一个地址叫做id ="d1"就可以直接用的d1来描述
color: green;
}
#d1 p span{ div定的地址叫做id=“d1” 就是d1里面的<p>标签里面的<span>描述 后代元素选择器
font-size: 50px
}
div > span{ 根据div里面的第一个span描述 >是他的直接的孩子
background-color: yellow; 颜色独占一行
}
</style>
二，伪装选择器
是特殊的状态
}
input:focus{ focus获取焦点的时候带颜色
background:-color yellow;
}
p::selection{ 选中的时候的颜色，特殊点是俩个冒号
background-color: orange;
color: red;
}
三，伪元素
特殊的位置
p:first-letter{ first-letter是把标签里面的第一个字换成红色
color: red;
}
p:before{ before标签是把字体位置放到最前边
content: "我会出现在整个段落的最前边";
color: green;
}
p:after{ after标签是把字体位置放到最后边
color: "我会出现在整个段落的最后边";
color:green;
}
四，属性选择器
属性的选择器要用中括号
/*p[title]{
background-color: red;
}
p[title="hello"]{
background-color: red;
}
/*p[title^="ab"]{ ^是前边的
background-color: red;
}
p[title$="c"]{ $是后边的
background-color: red;
}
*/
/*p[title*="c"]{ *是代表所有的
background-color: red;
}*/
五，其他子元素选择器
*:first-child{ *:first-child选中全部变红
background-color: red;
}
p：first-of-type{ p:first-of-type p里面的第一个变红
background-color: red;
}
p:nth-child(3){ nth-child(3) 是指定第几个的目前是第三个
background-color: red;
}
p:nth-child(add){
background-color: red;
}
p:nth-child(even){
background-color: red;
}
六，兄弟元素选择器
span + p{ span + p 就是后面的就一个p变红
background-color: red;
}
span ~ p{ span ~ p 就是后面所有的变红
background-color: red;
}
七，否定伪类
p:not(.hello){ not(.hello)是除了带有hello的不变色
background-color: red;
}
八，样式的继承
在继承全部的时候在<body>下边直接写，不会把所以的元素都继承，
例如：
<p color="red">
<body>
<p>
我是p标签中的文字
<span>我是span中的文字</span>
</p>
<span>我是p元素外的span</span>
</body>
</p>
</html>
九，选择器的优先级
内联样式，1000
id选择器，100
类和伪类，10
元素选择器，1
通配*，0 也有优先级
继承的样式没有优先级
!important; 优先级%100 一定要慎用
十，a的伪类
涉及到a的伪类一共有四个
:link
:visited
:hover
:active
而这四个选择器的优先级是一样的
a的伪类是要按照顺序来的
十一，文本标签
<em> 斜体字 i标签也是斜体字 但是i标签是来写小图标的
<big> 字体大点
<strong> 粗字体
版权的声明用 small 因为字体小
<cite> 写题目
<blockquote> 常引用 换行
<sup> 次方，就是往上挪，上标 <sub> 下标\
<q>表示短引用
郭敬明的个头<ins>真高呀</ins> <ins> 下划线
i标签和b标签 i是斜体字 b标签是粗体字 这俩是纯表现的标签
<per> 等宽字节
周杰伦<sup><a href="#">[1]</a></sup> 超链接的上标
<p>H<sub>2</sub>0</p> 2是下标
<del>4000</del><br> del标签是把4000划掉的
十二，列表
在网页中一共有三种列表：
/*去掉项目符号*/
ul{
list-style: none; list-style: none; 是去除符号的
}
1、无序列表 ul li 都是块，独立占一行的
2、有序列表 ol 可以用abc开头和罗马数字
3、定义列表 dl dt被定义的内容dd对定义的内容的描述
十三，单位
就是孩子占父亲的一半50%
长度单位
像素px
百分比%
em
游戏
第一关：plate 元素选择器：
第二关：bento 元素选择器
第三关：#fancy id选择器
第四关：plate apple 后代元素选择器
第五关：#fancy pickle 后代元素选择器
第六关：.small 类选择器
第七关：orange.small 复合选择器
第八关：bento>orange.small 子元素选择器
第九关：plate,bento,plate 并集选择器
第十关：* 通配选择器
第十一关：#fancy>.small,pickle,plate>apple 并集选择器
第十二关:plate+apple 兄弟选择器
第十三关：bento~pickle 兄弟选择器
第十四关:plate>apple 直系子列选择器
第十五关:orange:first-childd 子元素选择器
第十六关: apple,plate>pickle.small 选择器分组和子类选择器和类选择器
第十七关：#fancy>.small,pickle.small id直系子类选择器，和类选择器
第十八关: plate:nth(2) 指定子选择器
第十九关：bento:nth-child(2) 指定子类选择器
第二十关：apple:first-child 指定子类选择器
第二十一关：plate:nth-child(even) 指定子类选择器 是偶数的
第二十二关：plate:nth-of-type(3),plate:nth-of-type(5) 指定子类选择器为1和3
第二十三关：plate:nth-child(2)>apple 指定子元素中的 直系子元素
第二十四关：orange:nth-child(2),apple:last-child 指定子元素和 子元素选择器
第二十五关：bento:empty empty选择器选择每个没有任何子级的元素
第二十六关： apple:not(.small) 否定伪类选择器
