爱站程序员基地上一章节：CSS字体属性
CSS选择器
- 基础选择器
- 类选择器
- 多类名选择器
- ID选择器
- 通配符选择器
- 链接伪类选择器
- 链接伪类选择器简写方式
- 标准选择器(交集选择器)
- 并集选择器
- 后代选择器
- 子元素选择器
基础选择器
类选择器
声明定义： .类名｛属性1:属性值;属性2:属性值;｝调用：<标签 class=”类名”>内容</标签>*
定义：.orange {color: orange;}.red {color: red;}调用：<span class=\"red\">l</span><span class=\"orange\">e</span>
多类名选择器
（表示多个类名同时调用并且能多次使用）
声明定义： .类名1｛属性1:属性值｝ .类名2｛属性2：属性值｝调用：<标签 class=”类名1 类名2”>内容</标签>*
定义.green{color: green;}.font-size1{font-size: 12px;}调用<div class=\"green font-size1 \">卡特</div>
ID选择器
(id不能重复)
声明定义：#类名1｛属性1:属性值｝#类名2｛属性2:属性值｝调用：<标签 id=”类名1”>内容</标签>
声明#green{color: green;}#font-size1{font-size: 12px;}调用<div id=\"green font-size1 \">卡特</div>
通配符选择器
*｛属性1:属性值;｝
链接伪类选择器
未访问的链接 a:link {属性1：属性值;}已访问的链接 a:visited{属性1：属性值;}鼠标经过链接 a:hover{属性1：属性值;}选定的鼠标状态 a:active{属性1：属性值;}
声明定义a:link {font-size: 20px;color: red;font-weight:900;}a:visited {font-size: 20px;color: blue;font-weight:900;}a:hover {font-size: 20px;color: green;font-weight:900;}a:active {font-size: 20px;color: yellow;font-weight:900;}调用<a href=\"#\">秒杀</a><a href=\"#\">玄龟</a><a href=\"#\">惊天</a><a href=\"#\">变</a>
链接伪类选择器简写方式
/*实际工作中用的多*/a{font-size: 20px;color: red;font-weight:900;}a:active{font-size: 20px;color: green;font-weight:900;}
复合选择器
标准选择器(交集选择器)
标签选择器（类选择器）
定义.g {color: green;}p.g {font-family:\"微软雅黑\";}调用<p class=\"g\">绿色且字体是微软雅黑</p>
并集选择器
div{color: red;}p{color: red;}span{color: red;}并集选择器后：div,p,sapn,.py{color:red;}调用<h2 class=\"py\">中学化学课本</h2>
后代选择器
定义div p{color: red;}.test p{color: red;}调用<div class=\"test\"><p>我是div的后代p，我会变红</p><p>我类标签test的后代p，我也会变红</p></div><p>我不是div的后代p标签，我不会变红</p>
子元素选择器
只选择亲儿子（一级列表）
定义.nav >li{color: red;}调用<ul class=\"nav\"><li>1级列表 #变红<ul><li>2级列表</li> #这一级不会被选择器渲染</ul></li></ul>
