CSS回顾总结—选择器

上一章节：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>