苏飞论坛

 找回密码
 马上注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

分布式系统框架(V1.3) 轻松承载百亿数据,千万流量!讨论专区 - 源码下载 - 官方教程

HttpHelper万能框架(V2.3) HttpHelper官方出品,无敌框架讨论区 - 源码下载 - 在线测试和代码生成

HttpHelper爬虫类(V1.9) 最牛的爬虫类,没有爬不到只有想不到 源码 - 代码生成器 - 讨论区 - 教程- 例子

查看: 352|回复: 9

[CSS] 【零基础学习web前端】CSS选择器(伪类,通用,子元素)

[复制链接]
发表于 2018-12-2 17:19:43 | 显示全部楼层 |阅读模式
本帖最后由 Amy 于 2018-12-2 17:21 编辑

【零基础学习web前端】CSS选择器(伪类,通用,子元素)


【零基础学习web前端】教程目录导航




[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>

效果:
3.jpg
、通用选择器

通用选择器用*来表示。例如:
[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教程”会显示成蓝色,而其它两个元素会显示成红色。

发表于 2018-12-2 17:29:06 | 显示全部楼层
发表于 2018-12-2 17:33:06 | 显示全部楼层
发表于 2018-12-2 17:34:07 | 显示全部楼层
发表于 2018-12-2 17:35:14 | 显示全部楼层
 楼主| 发表于 2018-12-2 17:41:26 | 显示全部楼层
 楼主| 发表于 2018-12-2 17:43:04 | 显示全部楼层
发表于 2018-12-2 17:45:57 | 显示全部楼层
发表于 2018-12-2 18:42:49 | 显示全部楼层
发表于 2018-12-3 11:25:50 | 显示全部楼层
您需要登录后才可以回帖 登录 | 马上注册

本版积分规则

QQ|手机版|小黑屋|手机版|联系我们|关于我们|广告合作|苏飞论坛 ( 豫ICP备17001017号-1)

GMT+8, 2019-5-27 03:08

© 2017-2018

快速回复 返回顶部 返回列表