第三章 CSS
名字和值之间是用冒号连接,也不要忘了以分号结尾
第四章 CSS语法
/*
css中的注释,注释中的内容会自动被浏览器所忽略（ctrl+/ 出注释）
css的基本语法:
选择器 声明块
选择器:通过我们的选择器可以选中页面中的指定元素
比如p的作用就是选中页面中所有的p元素
声明块，通过声明块来指定要为元素设置的样式
声明块由一个一个的声明组成
声明是一个名值对结构
一个样式名对应一个样式值，名和值之间以：连接，以；结尾
*/
/*
将所有的段落设置为红色（字体）
元素选择器
作用：根据标签名来选中指定的元素
语法：标签名{ }
例子：p{ } h1{} div{}
*/
/*
p{
color:red;
}
h1{
color:green;
}
/*
id选择器
作用:根据元素的id属性值选中一个元素
语法：#id属性值{}
例子：#box{} #red{}
#开头 表示id选择器 (id只能是唯一一个，如果设置了重复的id，那重复的id就变一样的样式，但是这样写是不对的，也只能操作负责一个，这样很容易出现隐患)
*/
/*
类选择器
作用：根据元素的class属性值选中一组元素
语法：.class属性值
例如：.blue{
color:blue;
}
*/
/*
通配选择器
作用：选中页面中的所有元素
语法：*
*/
第五章 复合选择器
例题：
我是p元素
/将class为red的元素设置为红色（字体）/
.red{
coloe:red;
}
/将class为red的div字体大小设置为30px /
所以我们采取 ： div（元素选择器）.red（类选择器）{
font-size:30px;
}
/*
交集选择器
作用：选中同时复合多个条件的元素
语法：选择器1选择器2选择器3选择器n{}
注意点：
交集选择器中如果有元素选择器，必须使用元素选择器开头
*/
.a.b.c (意思是同时满足这三个条件的类选择器) 比如
还有一种
/ div#box1{}/ （表示选中这个div同时这个div的id是box1，不推荐这样写，因为通过box1已经可以确定这个元素的唯一性了，通过box1就可以找到唯一对应的元素，你再加一个div等于多此一举）
/*
选择器分组（并集选择器）
作用：同时选择多个选择器对应的元素
语法：选择器1，选择器2，选择器3，选择器n{} （中间是逗号，意义是即选择了选择器1，也选中选择器2，选择器3）
#b1，p1，h1，span，div.red{}
*/
/*
为div的子元素span设置一个字体颜色红色
（为div直接包含的span设置一个字体颜色）
子元素选择器
作用：选中指定父元素的指定子元素
语法：父元素>子元素
*/
例如:div > span{
color : orange;
(只有div内的span可以被选中，div外的span不能被选中，但是有一个弊端，这种方式没有告诉你，你是要哪个div里面的span，如果有好多div，div又套着span，那么这些div里套着的span都会被选中)
}
解决方式：
例如
我是一个div
<p>
我是div中的p元素
<span>我是p元素中的span</span>
</p>
<span>我是div中的span</span>
<div>
<span>我是第二个div里的span</span>
</div>
这时我们如果要选中第一个div中的span，可以直接写成 div.box > span{}, 这时下面的span就不会被带上了。
/*
后代元素选择器
作用：选中指定元素的指定后代元素
语法：祖先 后代 （中间是空格）
*/
接上面那个例题，如果我们要选中 div中所有的span都变成蓝色，不管是p标签里面的span，还是p标签外面的span都变蓝色怎么选？
直接用后代元素选择器
/*
div span {
color：blue；
（div中所有的后代span元素都被选中）
}
*/
还可以 div > p > span{} (这时就要求我们的span要两个祖先元素，一个父元素是p，p的父元素还得是div，其实就是找div的孙子span，这时的color只有我们里面的span，外面的span就不会被选中)
/*
选择下一个兄弟
语法：前一个 + 下一个
选择下边所有的兄弟 （一定是选择它下边的，它上边的不会被选中）
语法：兄 ~ 弟 （中间是波浪号 ）
*/
例如 p + span {
color ：red；
}
这样写的话是这句话 我是div中的span 变红色了，因为这个选择器是选择下一个兄弟元素，找紧挨它的后面的一个，注意只是下一个，假设下面有很多个兄弟，也只找离他最近的。
假设情况是这样的：
<p>
我是div中的p元素
<span>我是p元素中的span</span>
</p>
<div></div>
<span>我是div中的span</span>
<span>我是div中的span</span>
<span>我是div中的span</span>
<span>我是div中的span</span>
这种情况也找不到，要挨着p的span才能找到，这里中间隔了一个div，span没有紧挨div所以找不到。
/*
属性选择器
[属性名]选择含有指定属性的元素
[属性名 = 属性值]选择含有指定属性和属性值的元素
[属性名 ^= 属性值] 选择属性值以指定值开头的元素
[属性名 $= 属性值] 选择属性值以指定值结尾的元素
[属性名 *= 属性值] 选择属性值中含有某值的元素的元素
*/
例如： p[title]{
color : orange;
}
p[title = abc]{
color ：orange；
}
p[title^=abc]{
color : orange;
}
p[title$=abc]{
color : orange;
}
比如 p[title$=helloabc]{
color ：orange； （因为helloabc也是以abc结尾的，所以可以被选定）
}
p[title *= e]{
color : orange; (在哪个位置不重要，重要的是那个title里有没有e这个字母)
}
少小离家老大回
乡音无改鬓毛衰
儿童相见不相识
*/
伪类选择器
ul > li 然后按Tab键，就会自动生成一个包含有li的这样一个结构。（根据css选择器，来生成标签）
ul >li*5 然后按Tab键，就会自动生成ul里面有5个li
/*
伪类（不存在的类，特殊的类）
-伪类用来描述一个元素的特殊状态
比如：第一个元素，被点击的元素，鼠标移入的元素…………
-伪类一般情况下都是使用：开头
：first-child 第一个子元素
（好处在于不用加任何标识，总是能确保你要选择的是第一个）
：last-child 最后一个子元素
:nth-child() 选中第n个子元素，想选哪个选哪个
特殊值：
n 第n个 n的范围0到正无穷
2n 或 even 表示选中偶数位的元素
2n+1 或 odd 表示的都是选中奇数位的元素
-以上这些伪类都是根据所有的子元素进行排序的，不是说你是第一个li，你得是所有元素里的第一个，比如有什么div，什么span，你li都得是它们上面第一个，才算是第一个.
比如
我是一个span
这样的li就不算第一个，因为span在它上面。
还有 ：first-of-type 只找同类型中的第一个元素
：last-of-type 只找同类型中的最后一个元素
：nth-of-type …………
-这几个伪类的功能和上述的类似，不同点是它们是在同类型元素中进行排序
：not（）否定伪类
-将符合条件的元素从选择器中去除
比如假设我们要去除第三个
那就是 ul > li:not(:nth-child(3)){ (表示选中所有li，除了第三个，注意child还是大排行，假设前面有别的标签，就从那个标签算起第3个)
color : yellow;
}
如果改写为ul > li:not(:first-of-type(3)){ (这是一个小排行 ，那么就会从li标签开始数第三个)
color:yellow;
}
*/
比如 ul>li:first-child{
color : red;
}
ul>li:last-child{
color : red;
}
ul>li:nth-child(2){
color : red;
}
：：before 和 ：：after的定义
⑴::before 创建一个伪元素，作为已选中元素的第一个子元素，常通过 content 属性来为一个元素添加修饰性的内容。
⑵::after 创建一个伪元素，作为已选中元素的最后一个子元素，常通过 content 属性来为一个元素添加修饰性的内容
伪类before 写法 ：：before{
content : ' ' ;
}
伪类after写法 ：：after{
content：' ' ;
}
两种伪类的特点:
1、伪元素before和after的content属性必须填写，可设置为空串；
2、伪元素before和after的content属性中的文本是不能被搜索引擎获取的；
3、伪元素before和after属于行内元素，并可通过设置display属性转换为块元素或者行内块元素；
