Previous chapter: CSS font properties
CSS selector
Basic selector
class selector
声明定义: .类名{属性1:属性值;属性2:属性值;}
调用:<标签 class=”类名”>内容</标签>*
定义:
.orange {
color: orange;
}
.red {
color: red;
}
调用:
<span class="red">l</span>
<span class="orange">e</span>
Multiple class name selector
(Indicates that multiple class names are called at the same time and can be used multiple times)
声明定义: .类名1{属性1:属性值} .类名2{属性2:属性值}
调用:<标签 class=”类名1 类名2”>内容</标签>*
定义
.green{
color: green;
}
.font-size1{
font-size: 12px;
}
调用
<div class="green font-size1 ">卡特</div>
ID selector
(id cannot be repeated)
声明定义:
#类名1{属性1:属性值}
#类名2{属性2:属性值}
调用:<标签 id=”类名1”>内容</标签>
声明
#green{
color: green;
}
#font-size1{
font-size: 12px;
}
调用
<div id="green font-size1 ">卡特</div>
wildcard selector
*{属性1:属性值;}
Link pseudo-class selector
未访问的链接 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>
Link pseudo-class selector shorthand
/*实际工作中用的多*/
a{
font-size: 20px;
color: red;
font-weight:900;
}
a:active{
font-size: 20px;
color: green;
font-weight:900;
}
compound selector
Standard selector (intersection selector)
Tag selector (class selector)
定义
.g {
color: green;
}
p.g {
font-family:"微软雅黑";
}
调用
<p class="g">绿色且字体是微软雅黑</p>
Union selector
div{
color: red;
}
p{
color: red;
}
span{
color: red;
}
并集选择器后:
div,
p,
sapn,
.py{
color:red;
}
调用
<h2 class="py">中学化学课本</h2>
descendant selector
定义
div p{
color: red;
}
.test p{
color: red;
}
调用
<div class="test">
<p>我是div的后代p,我会变红</p>
<p>我类标签test的后代p,我也会变红</p>
</div>
<p>我不是div的后代p标签,我不会变红</p>
Child element selector
只选择亲儿子(一级列表)
定义
.nav >li{
color: red;
}
调用
<ul class="nav">
<li>1级列表 #变红
<ul>
<li>2级列表</li> #这一级不会被选择器渲染
</ul>
</li>
</ul>