分类
|------内联 写在标签里面，控制精确，代码重用性差
|---------style=样式
<div style="background: yellow; width: 100px; height: 100px;"></div> ???????<div style="background: red; width: 100px; height: 100px;"></div>
|------内嵌 嵌在页面的<head></head>里，控制没有内联的精确，代码重用性好
|---------<style type="text/css"></style>
<style> ???????????#first{background: pink; width: 200px; height: 100px;} ???????????#second{background: blue; width: 200px; height: 100px;} ???????</style><div id="first"> ???????????????????</div> ???????<div id="second"> ???????????????????</div>|------外部 单独的样式文件，控制没有内联的精确，代码重用性最好
|---------<link href="" rel="stylesheet" type="text/css"/>
#third{ ???background: purple; ???width: 200px; ???height: 300px;}<link rel="stylesheet" href="1111.css" /><div id="third"> ???????????????????</div>
选择器 样式表用来选取元素 标签：根据标签名选中元素
|------class
|---------.点
|---------根据class名来筛选元素
|---------可以有重复的名字
.common{ ???????????width: 100px; ???????????height: 100px; ???????????background-color: black; ???????????color: white; ???????} ???????.common:hover{ ???????????background-color: red; ???????????color: black;<div class="common"> ???????????我是第一个common ???????</div> ???????<div class="common"> ???????????我是第二个common ???????</div> ???????<div class="common"> ???????????我是第三个common ???????</div>
|------id
|---------#
|---------根据id名来筛选唯一的元素
|---------不能有重复的名字
#third{ ?????????????width: 100px; ?????????????height: 100px; ?????????????background-color: green; ?????????}<div id="third"> ???????????????????</div>
|------复合
|---------逗号：并列 div,span
|---------空格：后代 #list li
|---------大于号：子元素选择器 div>p div中所有p标签
div,p{ ???????????border: 1px solid red; ???????????????????} ???????#third,#fourth{ ???????????border: 1px solid black; ???????} ???????#first_ul li{ ???????????color:brown; ???????} ???????#second_ul li{ ???????????color: darkblue; ???????} ???????#div_p>p{ ???????????color: green; ???????}<div id="third"> ???????????????????</div> ???????<div id="fourth"> ???????????????????</div><ul id="first_ul"> ???????????<li>无序一</li> ???????????<li>无序一</li> ???????????<li>无序一</li> ???????</ul> ???????<ul id="second_ul"> ???????????<li>无序二</li> ???????????<li>无序二</li> ???????????<li>无序二</li> ???????</ul> ???????<div id="div_p"> ???????????<p>我是div中的第一行p元素</p> ???????????<p>我是div中的第二行p元素</p> ???????????<p>我是div中的第三行p元素</p> ???????????<div>我是div中的第四行div元素</div> ???????</div>
|------属性选择器
|---------[属性名 = 属性值]{} 属性名后边可以加 |、*等 代表匹配所有属性有属性值的元素
|---------表单元素的属性选取
[href="aa.html"]{ ???????????color: red; ???????} ???????input[type="text"]{ ???????????background-color: gainsboro; ???????}<a href="aa.html">跳转</a> ???????<input type="text" name="" id="" value="" /><br /> ???????<input type="password" name=""id=""value="" />
|------伪类
|---------a标签的四个伪类
|------------a:link 未访问的链接
|------------a:visited 已访问的链接
|------------a:hover 鼠标划过链接
|------------a:active 已选中的链接
a:link{ ???????????color:red ???????} ???????a:visited{ ???????????color: black; ???????} ???????a:hover{ ???????????color: blue; ???????} ???????a:active{ ???????????color: yellow; ???????}<a href="https://www.baidu.com">跳转到百度</a>
CSS样式表知识总结
原文地址：https://www.cnblogs.com/q-1234/p/9452075.html