苏飞论坛

 找回密码
 马上注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

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

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

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

查看: 160|回复: 9

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

[复制链接]
  • TA的每日心情
    开心
    昨天 09:03
  • 签到天数: 17 天

    [LV.4]偶尔看看III

    发表于 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教程”会显示成蓝色,而其它两个元素会显示成红色。

  • TA的每日心情
    开心
    昨天 12:22
  • 签到天数: 20 天

    [LV.4]偶尔看看III

    发表于 2018-12-2 17:29:06 | 显示全部楼层
  • TA的每日心情
    奋斗
    昨天 09:37
  • 签到天数: 21 天

    [LV.4]偶尔看看III

    发表于 2018-12-2 17:33:06 | 显示全部楼层
  • TA的每日心情
    奋斗
    昨天 09:37
  • 签到天数: 21 天

    [LV.4]偶尔看看III

    发表于 2018-12-2 17:34:07 | 显示全部楼层
  • TA的每日心情
    开心
    昨天 12:22
  • 签到天数: 20 天

    [LV.4]偶尔看看III

    发表于 2018-12-2 17:35:14 | 显示全部楼层
  • TA的每日心情
    开心
    昨天 09:03
  • 签到天数: 17 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-12-2 17:41:26 | 显示全部楼层
  • TA的每日心情
    开心
    昨天 09:03
  • 签到天数: 17 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-12-2 17:43:04 | 显示全部楼层
  • TA的每日心情
    慵懒
    昨天 08:50
  • 签到天数: 19 天

    [LV.4]偶尔看看III

    发表于 2018-12-2 17:45:57 | 显示全部楼层
  • TA的每日心情
    开心
    昨天 09:05
  • 签到天数: 643 天

    [LV.9]以坛为家II

    发表于 2018-12-2 18:42:49 | 显示全部楼层
  • TA的每日心情
    奋斗
    昨天 08:44
  • 签到天数: 199 天

    [LV.7]常住居民III

    发表于 2018-12-3 11:25:50 | 显示全部楼层
    您需要登录后才可以回帖 登录 | 马上注册

    本版积分规则

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

    GMT+8, 2018-12-13 00:19

    © 2017-2018

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