这是我参与「第四届青训营 」笔记创作活动的的第2天
HTML负责框架，CSS则负责样式，让前端看起来美观，CSS的内容较多，以下根据自己的学习笔记和理解说明CSS的使用和选择器。
CSS的使用
CSS的使用有三种方法，分别是外链，嵌入和内联。
1.外链
<link rel="stylesheet" href="/assets/style.css"link rel="stylesheet" href="/assets/style.css">
2.嵌入
<style>
div{
font-size: 50px;
line-height: 200px;
}
</style>
3.内联
<div style="font-size:12px ;">中国人不骗中国人</div>
CSS选择器
1.标签(元素)选择器
元素选择器是是HTML的标签开头的选择器，其格式为：标签{}
div{ font-size:15px; }
2.id选择器
id选择器，可以让我们通过id属性选择性地去使用这个样式。其格式为：#id{}。
注意的是id选择器只能选中一个元素。
CSS示例
#box1{ font-size:15px; }
HTML示例
<div id=box1>今天天气真好！</div>
3.类选择器
class选择器可以通过class属性有效的选择性地去使用这个样式。格式为：.class{}
CSS示例
.box1{ font-size:15px; }
HTML示例
<div class=box1>今天天气真好！</div>
4.属性选择器
[属性名]选择含有指定属性的元素
[属性名=属性值] 选择含有指定属性和属性值的元素
[属性名^=属性值] 选择属性值以指定值开头的元素
[属性名$=属性值] 选择属性值以指定值结尾的元素
[属性名*=属性值] 选择属性值中含有某值的元素
CSS示例
p[title]{color: bisque;}
HTML示例
<p title="abc">少小离家老大回</p>
5.通配选择器
通配选择器的格式为*{}，选中全部的样式
*{font-size:15px;}
6.伪类选择器
伪类，即不存在的类，伪类用来描述一个元素的特殊状态，比如：第一个子元素、被点击的元素、鼠标移入的元素等。伪类选择器分为结构伪类和状态伪类选择器
结构伪类
伪类一般情况下都是使用:开头，如：
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child 选中第n个子元素
特殊值：
n 第n个 n的范围是0到正无穷
2n或even 表示选中偶数位的元素
2n+1或 odd 表示选中奇数位的元素
以上这些伪类都是根据所有的子元素进行排序，注意与以下区分
:first-of-type
:last-of-typ
:nth-of-type()
_这几个伪类的功能和上述类似，不同点是它们是在同类型中进行排序
:not()否定伪类
CSS示例
/*表示第三个子元素的字体颜色不变为*/
ul>li:not(:nth-child(3)){
color: deepskyblue;
}
HTML示例
<ul>
<span>我是一个span</span>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
<li>第五个</li>
</ul>
状态伪类
a:link{} ，link用来表示没访问过的链接（正常链接）
a:link{
color: red;
}
a:visited{} ，visited用来表示访问过的链接，由于隐私的原因，所有visited这个伪类只能修改链接的颜色
a:visited{
color: orange;
}
a:hover{} ， :hover 用来表示鼠标移入的状态
a:hover{
color: deepskyblue;
font-size: 50px;
}
a:active{} ， :active 用来表示鼠标点击
a:active{
color: yellowgreen;
}
:focus{} ， 一个输入字段获得焦点时选择的样式
input:focus
{
background-color:yellow;
}
注意：link与visited是超链接才可以使用，hover与active其他也可以使用。
7.复合选择器
交集选择器
作用：选中同时符合多个条件的元素
语法：选择器1选择器2选择器3选择器n{}
注意点：交集选择器如果有元素选择器，必须使用元素选择器开头
CSS示例
div.red{
font-size: 30px;
}
HTML示例
<div class="red">我是div</div>
选择器分组（并集选择器）
作用：同时选择多个选择器对应的元素
语法：选择器1,选择器2,选择器3,选择器n{}
CSS示例
h1,span{
color: cadetblue;
}
HTML示例
<h1>我是h1标题</h1>
<span>我是span标签</span>
8.关系选择器
父元素——直接包含子元素的元素叫做父元素
子元素——直接被父元素包含的元素是子元素
祖先元素——直接或间接包含后代元素的元素叫做祖元素，一个元素的父元素也是它的祖先元素
后代元素——直接或间接被祖先元素包含的元素叫做后代元素，子元素也是后代元素
兄弟元素——拥有相同父元素的元素是兄弟元素
子元素选择器
作用：选中指定父元素的指定子元素
语法：父元素>子元素{}
CSS示例
div > span { /*此处表明所有在div中的span子元素都会受到影响*/
color: cadetblue;
}
HTML示例
<div> <span>我是div中的span元素</span> </div>
后代元素选择器
作用：选中指定元素内指定的后代元素
语法：祖先 后代{}
CSS示例
div span{
color: red;
}
HTML示例
<div>
<nav>
<li>
<span>我是div的后代元素span</span>
</li>
</nav>
<div>
兄弟选择器
选择下一个兄弟（一定是前一个元素紧挨的下一个元素）
语法：前一个 + 下一个{}
选择下边所有的兄弟元素
语法：兄~弟{}
CSS示例
p+span{
color: deepskyblue;
}
p~span{
color: red;
}
HTML示例
<div>
我是一个div
<p>
我是div中的p元素
<span>
我是p元素中的span
</span>
</p>
<span>
我是div中的span元素
</span>
<span>
我是div中的span元素
</span>
<span>
我是div中的span元素
</span>
</div>
以上说明了三种CSS的使用方法和8种CSS的选择器，有疑问和其他想法，欢迎和我一起探讨学习。
