CSS样式表的引入方式
css样式表的三种引入方式的优先级：行内样式（内联样式） > 内部样式（内嵌样式）= 外部样式（外链式），谁靠后谁生效
css样式表的三种引入方式：
行内样式、内联样式，是通过标签的style属性来设置元素的样式，如：
<标签名 style="属性1：属性值1；属性2：属性值2;">内容</标签名>
注意：js的操作都是行内样式。
内部样式，是将css代码集中写在HTML文档的head头部标签中，并且用style标签定义，如：
<head><style type="text/css">div{color:red;}</style></head>
外部样式，是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，如：
<head><link rel="stylesheet" type="text/css" href="css文件路径"></head>
外部样式表才是真正意义上帮助我们解决了结构与表现分离，并且可以引用多个文件当中，在实际开发中通常使用外部样式表。
选择器的用法
1、基础选择器
p{}：标签选择器.class{}：类选择器#id{}：id选择器*{}：通配符选择器2、复合选择器
div,p,span{}：并集选择器，选择所有包含的元素。p.class或#id{}：交集选择器，应用于同一个元素的多个特征属性。标签名放前面，且两个名字之间没有空格。div p{}：后代选择器，以div内的所有p元素。div > p{}：子元素选择器，亲生父子。div + div{}：相邻兄弟选择器，注意相邻、同级。div ~ div{}：普通兄弟选择器，div ~ *{}表示后面所有。相邻兄弟选择器的使用场景
场景一：当两个连续的元素，前一个元素可以因为用户的某些行为被操作，后一个选择跟着发生一些交互的效果，此时可以用兄弟选择器。
<head><style>input:checked + span{color:red;}</style></head><body><input type="radio" name="sex"><span>老坛酸菜</span><input type="radio" name="sex"><span>康师傅</span></body></html>
场景二：消除第一个标签的样式，因为自己不能是自己的兄弟。
<html lang="en"><head><style>a{text-decoration: none;float: left;padding: 0 10px;} a + a{border-left:1px solid red;}</style></head><body> <a>HTML<a><a class="c">CSS<a><a>JavaScript<a> </body></html>
3、伪类选择器
伪类选择器本身也是一种基础选择器。使用伪类选择器，其实相当于检测元素的某一种状态。一般我们都是使用复合选择器的方式和其他选择器结合进行使用。一般都是交集选择器居多，其实本质就是，当某个元素得到某个状态之后，设置一段样式。
（1）焦点伪类选择器
input:focus：焦点状态实例：
<head><style>input:focus{border:1px solid red;outline: none;}div{display: none;width:100px;border:1px solid red;}input:focus + div{display: block;}</style></head><body><!-- 焦点状态 --><input type="text"><div>前端</div></body>
（2）动态伪类选择器
目前只有超链接具有四种状态，其他标签可以设置鼠标悬停和激活状态。当我们直接给定a标签定义样式，则默认四个样式显示同一个当前样式。当组合使用四种状态时，必须按照顺序排列，否则错误的顺序会导致样式的失效。
a:link{}：初始状态a:visited{}：访问之后的状态a:hover{}： 鼠标悬停的状态a:active{}：激活状态（按下了鼠标但是没松开的状态）
实例：
<head><style>a:link{color: grey;}a:visited{color:skyblue;}a:hover{color:red;}a:active{color:green;}</style></head><body><a href="">未点击超链接</a><a href="">已点击超链接</a><a href="">悬停</a><a href="">激活</a></body>
通常情况我们都是只设置a和a:hover的样式。
（3）结构伪类选择器
实例：
<ul><li class="one">1</li><li class="two">2</li><li class="three">3</li><li class="four">4</li><li class="five">5</li><li class="six">6</li></ul>
实例1（:first-child）：
li:first-child{color:mediumvioletred;}li:last-child{color:mediumvioletred;}
效果1：
实例2（:nth-child(n)）：
li:nth-child(2){color:mediumvioletred;}/*①*/li:nth-child(2n){color:mediumvioletred;}/*②*/li:nth-child(3n){color:mediumvioletred;}/*③*/li:nth-child(odd){color:mediumvioletred;}/*④*/li:nth-child(even){color:mediumvioletred;}/*⑤*/
效果2：
实例3：
<head><style>span:nth-child(1){color:red;}span:nth-of-type(1){color:greenyellow;}</style></head><body><div><p>第一个子元素</p><a href="#">第二个子元素</a><p>第三个子元素</p><span>第四个子元素</span></div></body>
效果3：
span:nth-child(1)匹配不到，因为第一个子元素的不是span类型；而需要span:nth-of-type(1)来指定第一个span元素。
匹配第n个元素：
p:first-child{}：选择属于其父元素的第一个且为p元素的子元素。如果第一个子元素不是p元素则匹配不到。另外是所有p都查找，不是只查找第一个。p:last-child{}：选择属于父元素的倒数一个子元素。如果同上p:nth-child(n){}：选择属于父元素的第n个子元素。如果同上。p:nth-last-child(n){}：选择属于父元素的倒数第n个子元素。如果同上。p:only-child{}：选择属于父元素有唯一子元素的元素。
匹配元素的第n个：
p:first-of-type{}：选择属于父元素的第一个p子元素。p:last-of-type{}p:nth-of-type(n){}：选择属于父元素的第n个p子元素。p:nth-last-of-type(n){}p:only-of-type{}：选择属于父元素有唯一子元素的元素。:root{}：设置HTML文档。p:empty{}：选择没有子元素的每一个p元素。
（4）反选伪类选择器
实例：
div :not(p){color:blue;}
效果：
:not(p){}：选择非p元素的每一个元素。
（5）目标伪类选择器
实例：
<head><style>:target{border:2px solid #d4d4d4;background-color: #e5eecc;}</style></head><body><p><a href="#news1">跳转内容 1</a></p><p><a href="#news2">跳转内容 2</a></p><p>请点击上面的链接，:target选择器会突显当前活动的HTML锚。</p><p id="news1"><b>内容 1...</b></p><p id="news2"><b>内容 2...</b></p></body>
效果：
#news:target{}：选择当前活动的#news元素。
（6）用户行为伪类选择器
实例：
<head><style>input{outline:medium;}input:focus{border: 2px solid blue;}</style></head><body><input type="text"></body>
效果：
input:focus{}：选择获得焦点的input元素。
（7）UI元素状态选择器
input:enabled：选择每个启用的input元素。input:disabled：选择每个被禁用的input元素。input:checked：选择每个被选中的input元素。CSS的三大特性
1、CSS的优先级
当同一个元素通过不同的选择器设置相同的样式的时候，会根据选择器的优先级（权重）来决定如何显示选择器优先级更高的声明，才会在元素上生效。如果权重相同的情况下，看顺序，靠后的生效。
优先级：
!important>行内样式>id选择器>伪类选择器=class选择器>元素选择器>通配符>继承，后面声明的比前面的声明的优先级高，相同属性后者覆盖前者。
另外!important最好不用。
权重计算规则：
复合选择器的权值计算
<head><style>div#id{color: blue;}div.div1.div2.div3.div4.div5.div6.div7.div8.div9.div10.div11{color: red;}</style></head><body><div id="id" class="div1 div2 div3 div4 div5 div6 div7 div8 div9 div10 div11">我是一个div标签</div></body>
上述代码显示字体颜色为红色，因为div#id权值相加的结果为0,1,0,1，而div.div1-11权值相加的结果为0,0,11,1，说明复合选择器（除并集外）的权值是分级相加，而不是相加在一起。
2、CSS的层叠性
css，html绘制页面，本身就是一层一层的画出来的。页面的元素对于我们来说就会有一个层叠的顺序，靠上的会显示，靠下的会被遮挡或覆盖。
3、CSS的继承性
在css当中我们想要考虑继承的问题，元素与元素之间，必须存在嵌套关系。所谓的继承也就是父元素或者祖先元素身上设置了某些属性，到子元素或后代元素身上依旧有效。
并不是所有的属性都可以继承
一般文字本样式的属性都是可以继承的，比如text-，font-，line-这些开头的可以继承，还有color。一般设置结构的属性都是不能被继承的，比如width，height，margin，padding，border，background，float，position。
