CSS⼊门系列(三)关联选择器组合选择器
CSS⼊门系列(三)关联选择器&组合选择器
⽬录
1. 关联选择器
定义是:选择器中的选择器。假设如下:
<div>这个<b>⼀个</b>div</div>
<span>这个<b>⼀个</b>span</span>
我们在head中定义b标签的样式:
b{
样式略;
}
定义完之后在div和span标签中,b的标签都会按照样式变化,如何我只想让span标签中的b标签改变样式,怎么办呢?
span b{
样式略;
}
就是span中的b中的样式。
2. 组合选择器
对多种选择器进⾏相同样式的定义
假设对haha类和div标签中的b标签进⾏相同的样式设定,那么:
.class,div b{
样式略;
}
3. 伪元素选择器
这个例⼦⼤家都应该知道,就是假设有个⼀个超链接,我点之前有下划线,并且是蓝⾊,⽽点之后呢就是变成红⾊,证明我访问过。
<a href="www.sina"target="_blank">伪元素选择器演⽰</a>
现在我们⾃定义这种状态,怎么设置呢?这就需要伪元素了。
关于超连接有三种效果:
/*未访问*/
a:link{
/*设置背景;设置下划线;设置字体;*/
css鼠标点击样式background-color:#06F;
text-decoration:none;
font-size:18px;
}
/*⿏标悬停*/
a:hover{ background-color:#FFF; text-decoration:none; font-size:24px;
}
/*点击效果*/
a:active{
样式略
}
/*访问后效果*/
a:visited{
格式略
}
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论