CSS的引入方式
第一种：在head中 <style></style> ???嵌入式
第二种：在head中 <link href="index.css" rel="stylesheet"> ??链接式 （先加载css，再加载html）推荐
第三种：在head中 <style>@import "index.css";</style>> ???导入式（先加载html，再加载css）
第四种：直接在html标签中<div style="width: 50%; height: 60px; background-color: orangered">不推荐这种方式</div> ???行内式
CSS的选择器
1、基础选择器
* ???通用元素选择器，匹配任何元素 ???* { margin:0; padding:0; }
E ???标签选择器，匹配所有使用E标签的元素 ???p { color:green; }
.info和E.info ???class选择器，匹配所有class属性中包含info的元素 ???.info { background:#ff0; } ???p.info { background:red }
#info和E#info ???id选择器，匹配所有id属性等于footer的元素 ???#info { background:#333 } ???P#info { background:blue }
2、组合选择器(这里的E,F可以是基础选择器中的选择器)
E,F ???多元素选择器，同时匹配所有E元素与F元素，E和F之间用逗号分隔 ???div,p { color:#f00 }
E F ???后代选择器，匹配所有属于E元素后代（儿子、孙子....）的F元素，E和F之间用空格分隔 ???li a { font-weight:bold; }
E>F ???子元素选择器，匹配所有E元素的子元素(仅儿子)F,E和F之间用>分隔 ???div > p { color:#ccc }
E+F ???毗邻元素选择器，匹配所有紧随E元素之后的同级元素F,E和F之间用加号分隔 ???div + p { color:000 }
3、属性选择器
E[att] ???匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略，比如“[cheacked]”。以下同。） ??p[title] { color:#f00; }
E[att=val] ???匹配所有att属性等于“val”的E元素 ???div[class=”error”] { color:#f00; }
E[att~=val] ???匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素 ?????td[class~=”name”] { color:#f00; }
E[attr^=val] ???匹配属性值以指定值开头的每个元素 ????div[class^="test"]{background:#ffff00;}
E[attr$=val] ???匹配属性值以指定值结尾的每个元素 ????div[class$="test"]{background:#ffff00;}
E[attr*=val] ???匹配属性值中包含指定值的每个元素 ????div[class*="test"]{background:#ffff00;}
4、伪类
anchor伪类：专用于控制链接的显示效果
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }
before after伪类
p:before ???在每个 <p> 元素的内容之前插入内容 ???p:before{content:"hello";color:red}
p:after ???在每个 <p> 元素的内容之前插入内容 ???p:after{ content:"hello"；color:red}
CSS的引入方式及选择器
原文地址：https://www.cnblogs.com/dangrui0725/p/9503361.html