子元素和元素选择器
子元素：
父元素：
元素的关系就要看缩进的位置
后代元素选择器：
选中标签加上空格再加上元素
修改id选择器下面所有的span元素
#d1 span{
}
通过id选择器找到目标元素
#d1 p span{
}
元素选择器越短越好
子元素选择器：
div > span{
}
span元素在div下面
伪类选择器：
<a href="http://www.baidu.com">访问的连接</a>
<a href="http://www.baidu.com">没有访问的连接</a>
<input type="text"> （设置一个输入文本框）
a:link{
/* */
color:#9e57e6;
}
a:visited{
/* 只能设置字体颜色 */
color:#2b542c;
}
/* 鼠标移动 */
a:hover{
color:#2ff700;
}
/* 正在点击的*/
a:active{
color:#3eb1d0;
}
/* 获取焦点
输入颜色的字体
*/
input:focus{
background-color:#007aff;
color:#7C0070;
}
/* 选中的样式 兼容浏览器较多 */
p::selection{
color:#4cae4c;
}
/* 兼容火狐浏览器的选种样式 */
p::-moz-selection{
color:#9dbed8;
}
伪类选择器：
/*
给第一个字体设置属性
*/
p:first-letter{
}
/* 给首行设置属性 */
p:first-line{
}
/* 给标签前方定义属性 */
p:before{
content:'我出现在段落最前方';
}
/* 给标签后方定义属性 */
p:after{
content:'我出现在段落最后方';
}
否定伪类：
除了某个类的元素
p:not(类名){
}
伪元素：
正常链接
a:link
访问过的链接
a:visited（只能定义字体颜色）
鼠标滑过的链接
a:hover
正在点击的链接
a:active
/*
给第一个字体设置属性
*/
p:first-letter{
}
/* 给首行设置属性 */
p:first-line{
}
/* */
p:before{
content:'我出现在段落最前方';
}
/* */
p:after{
content:'我出现在段落最后方';
}
a的伪类的优先级是一样的，所以伪类的顺序：
a:link
a:visited
a:hover
a:active
属性选择器：
title 属性
属性选择器用[]表示
如：
p[title]{
属性内容
}
p[title='内容']{
属性
}
开头属性
p[^title='内容']{
属性
}
结尾属性
p[tittle$='内容']{
属性
}
包含属性
p[title*='内容']{
属性
}
子类选择器：
/*
给第一个子元素标签设置属性
p标签必须在第一个元素
任意一个标签下的第一个标签都会改变
*/
p:first-child{
}
/* 选中最后一个子元素标签 */
p:last-child{
}
/* 偶数子元素标签 */
p:nth-child(even){
}
/*奇数子元素标签 */
p:nth-child(odd){
}
/*指定准确个数的子元素标签()*/
p:nth-child(数字){
}
/* p:first-of-type 第一个p标签 */
/* p:last-of-type 最后一个p标签 */
兄弟选择器：
查找后边一个兄弟元素:
兄弟元素 + 兄弟元素{}
加号必须是紧挨着的元素标签
查找后边所有的兄弟元素:
兄弟元素 ~ 兄弟元素{}
波浪线则是后面所有的元素标签
选择器的优先级：
内联样式：1000
id选择器：100
类和伪类：10
元素选择器：1
通配*：0
继承的样式没有优先级
如果优先级一样，后面的属性会覆盖前面的
!important 优先级最高会超过内联样式
样式继承：
给祖先元素设置样式，所有的子元素都会继承
背景边框和定位不会被继承（background）
