1、CSS 语法：
h1 {color:blue; font-size:12px}
h1 -> 选择器：您需要改变样式的 HTML 元素
color:blue -> 一条声明（属性和值组成，属性和值用冒号隔开，声明之间用分号隔开）
2、css选择器总结：详细介绍请看https://www.cnblogs.com/z937741304/p/7901086.html
一、选择器
(1)通配符选择器-> * ：匹配页面中所有的元素，一般用来清除浏览器的默认样式，以"*"来确定
*{margin:0; padding:0}
(2)元素选择器：<p> <body> <div>等标签，以标签名来确定p,body,div
div{width:100px; height:100px;}
(3)id选择器：具有唯一性，在同一张页面中id名不能重复，以"#" 来确定
#box{width:100px; height:100px;}
(4)class选择器：在同一张页面中可以出现多次，以"." 来确定
.box{width:100px; height:100px;}
二、高级选择器
(1)E F 后代选择器：匹配到E元素下面的所有的F元素（包括子、孙），空格隔开
div ul li {width:100px; height:100px; background-color: red;}<br>//匹配到div下面的所有ul，且ul的所有后代li
<div>
<ul>
<li></li>
<li></li>
</ul>
</div>
(2)E,F 多元素选择器：同时匹配到E元素和F元素，用逗号隔开
div,#box{width:100px; height:100px; background-color: red;}//同时匹配到下文中的div标签和id为box的p标签
<div></div>
<p id="box"></p>
(3)E>F 子元素选择器：选择到E元素的直接子代F，只选择子代
div>li{width:100px; height:100px; background-color: red;}
<div>
<li>
div元素的直接子代li
</li>
<ul>
<li>这里的li不会显示红色</li>
</ul>
</div>
(4)E+F（相邻兄弟选择器）：紧接在E元素后面的同级元素F
div+.box{width:100px; height:100px; background:pink;}
<div></div>
<p class="box">紧接在E元素后面的同级元素F，会变粉色</p>
<p class="box">不会变粉色222</p>
<div></div>
<p></p>
<p class="box">不会变粉色333</p>
(5) E[attr]：匹配具有attr属性的E元素
div[title]{width:100px; height:100px; background:pink;} //匹配到下文中的第一个和第三个div元素 因为他们含有title属性
<div title="width"></div>
<div></div>
<div title="height"></div>
(6)E[attr="val"]：匹配具有attr属性且值只为val的的E元素
div[title="height"]{width:100px; height:100px; background:pink;} //匹配到下文中的第三个div元素
<div title="width">111</div>
<div>222</div>
<div title="height">333</div>
(7)E[attr~="val"]：匹配属性值为attr，并包含值val的E元素，用于选取属性值中包含指定词汇的元素
div[class~="love"]{width:100px; height:100px; background:pink;} //选择到下方第一个和第二个div元素
<div class="love">111</div>
<div class="I love you">222</div>
<div class="lover">333</div>
(8)E[attr|="val"]：匹配所有属性为attr，且值为val或者以var开头的E元素
div[class|="c1"]{width:100px; height:100px; background:pink;}//选择到下面当中的第一个和第三个元素
<div class="c1">111</div>
<div class="c1cs">222</div>
<div class="c1-c2">333</div>
(9)E[attr1][attr2="val"]：匹配所有 具有attr1属性 且有attr2属性，且attr2的值为val的E元素，这个就是写出几个属性选择器，并且都要同时满足他们的条件
div[title="width"][class]{width:100px; height:100px; background:pink;} //选择到下面的第一个div元素
<div title="width" class="box">111</div>
<div title="width">222</div>
三、css3新增的选择器
(1)E1~E2(选择E1后面的所有兄弟E2)
div~p{width:100px; height:100px; background:pink;} //div后面的三个p元素都选择到了
<div></div>
<p></p>
<p></p>
<p></p>
(2)E[attr^="val"] attr属性值以val开头的元素
div[class^="de"]{width:100px; height:100px; background:pink;} //选择到了前面三个div元素
<div class="de1"></div>
<div class="de"></div>
<div class="dedkjsfkld"></div>
<div class="1fde"></div>
(3)E[attr$="val"] attr属性值以val结束的元素
div[class$="de"]{width:100px; height:100px; background:pink;} //选择到了前三个
<div class="de1de"></div>
<div class="de"></div>
<div class="dedkjsfklde"></div>
<div class="1f"></div>
(4)[attr*="val"] attr属性值包含val的所有元素
div[class*="de"]{width:100px; height:100px; background:pink;} //选择到下面的 1 2 4 都包含de字母
<div class="de1de"></div>
<div class="de"></div>
<div class="dld"></div>
<div class="1def"></div>
四、有待更新
a伪类选择器
(1):link 匹配所有未被点击的链接
a:link{ color: green; }
(2):hover 匹配鼠标悬停在其上的元素
a:hover{ color: gold; }
(3):active 匹配鼠标按下还没有释放的元素
a:active{ color: blue; }
(4):visited 匹配所有已经被点击的链接
a:visited{ color: red; }
a伪元素选择器
