本帖最后由 Amy 于 2018-12-2 17:21 编辑
【零基础学习web前端】CSS选择器(伪类,通用,子元素)
[CSS] 纯文本查看 复制代码 6. 伪类选择器
7.通用选择器
8.子元素择器
六、伪类选择器
CSS 伪类用于向某些选择器添加特殊的效果。比如鼠标悬停等。
[CSS] 纯文本查看 复制代码 /*Link表示链接在没有被点击时的样式。*/
a:link{color:#999999;}
/*Visited表示链接已经被访问时的样式。*/
a:visited{color:#FFFF00;}
/*Hover表示当鼠标悬停在链接上面时的样式。*/
a:hover{color:#006600;}
/*active表示链接选定时的样式。*/
a:active {color: #0000FF}
注:
- 在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
- 在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。
- 伪类名称对大小写不敏感。
first-child 伪类
first-child 伪类来选择元素的第一个子元素
[CSS] 纯文本查看 复制代码 p > i:first-child {
font-weight:bold;
color:red;
}
这个样式只会作用于p元素的第一个子元素
[HTML] 纯文本查看 复制代码 <p>这里是 <i>苏飞论坛</i>. 欢迎 <i>您</i>.</p>
<p>这里是 <i>苏飞论坛</i>. 欢迎 <i>您</i>.</p>
效果:
七、通用选择器
通用选择器用*来表示。例如:
[CSS] 纯文本查看 复制代码 *{
font-size: 20px;
}
表示所有的元素的字体大小都是12px;同时通用选择器还可以和后代选择器组合。
例如:
[CSS] 纯文本查看 复制代码 p*{
font-size: 20px;
}
表示所有p元素后代的所有元素都应用这个样式。
八、子元素选择器
子选择器(child selector)仅是指它的直接后代,子选择器是通过“>”进行选择。例:
[CSS] 纯文本查看 复制代码 #links a {color:red;}
#links > a {color:blue;}
[HTML] 纯文本查看 复制代码 <p id="links">
<a href="#">Div+CSS教程</a>>
<span><a href="#">CSS布局实例</a></span>
<span><a href="#">CSS教程</a></span>
</p>
我们将会看到第一个链接元素“Div+CSS教程”会显示成蓝色,而其它两个元素会显示成红色。
|