苏飞论坛

 找回密码
 马上注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

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

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

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

查看: 122|回复: 6

[HTML/HTML5] 【零基础学习web前端】CSS选择器(元素,群组,类,ID,后代)

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

    [LV.4]偶尔看看III

    发表于 2018-12-1 11:58:43 | 显示全部楼层 |阅读模式
    【零基础学习web前端】CSS选择器(元素,群组,类,ID,后代)


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




    [C#] 纯文本查看 复制代码
    1. 元素选择器
    2.群组选择器
    3.类选择器
    4.ID选择器
    5.后代选择器


    要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器。

    HTML页面中的元素就是通过CSS选择器进行控制的。

    一、元素选择器
    一个完整的HTML页面是由很多不同的元素组成。元素选择器,是直接使用HTML元素的名称作为选择器(如 html、p、h1、em、a、img等),换句话说,文档的元素就是最基本的选择器。由于使用元素的名称作为选择器,在W3C标准中,又把元素选择器称为类型选择器、标签选择器。

    元素选择器匹配该类型的元素,并匹配DOM树中该类型元素的每一个实例,并为它们应用样式。如:

    html { color:red }

    h1 { color:blue }


    二、群组选择器
    假设希望 h2 元素和段落都是红色,则可以这样写
    h2,p { color:red }
    将 h2 和 p 选择器放在规则左边,然后用逗号分隔,就定义了一个规则。其右边的样式(color:red;)将应用到这两个选择器所引用的元素。

    多个选择器也可以使用这个规则,如
    [CSS] 纯文本查看 复制代码
    html,h2,p,a,table{
                color:red;
                font-size: 10px;
            }

    三、类选择器
    类选择器根据类名来选择,前面用“.”来标志,如:
    [CSS] 纯文本查看 复制代码
    .demoName{
                color: red;
            }

    这需要在HTML中,元素先定义一个class的属性,如:
    [HTML] 纯文本查看 复制代码
    <p class="demoName">
            这句话要红色的
        </p>
        <h2 class="demoName">
            这句话也要红色的
        </h2>

    两个元素的class都是demoName,则两个都应用这个css。

    四、ID选择器
    ID选择器类似于类选择器,ID选择器前面是用#号标志的。
    ID选择器具有唯一性,即同一个id在同一个文档页面中只能出现一次。
    [CSS] 纯文本查看 复制代码
    #demoName{
                color: red;
            }

    这里表示id为demoName的元素设置字体为红色。
    在页面中定义一个元素的id为demoName,如:
    [HTML] 纯文本查看 复制代码
    <div id="demoName">
            这些区域的字颜色为红色
        </div>

    五、后代选择器
    后代选择器又称包含选择器,用来选择特定元素或元素后代,将父元素的选择放在前面,对子元素的选择放在后面,中间加一个空格分开。
    后代选择器中的元素不仅只能有两个,对于多层祖先后代关系,可以有多个空格来分开。
    例如只希望h1元素中的espan元素应用样式,
    [CSS] 纯文本查看 复制代码
    h2 span{
                color: red;
            }


    这个规则只会将h2中的span元素文本变成红色,其他span元素不会应用这个颜色
    [HTML] 纯文本查看 复制代码
    <h2>
            这是<span>重要的</span>标题
        </h2>
        <span>这也是重要的标题</span>


    图示:
    2.jpg









  • TA的每日心情
    奋斗
    昨天 09:37
  • 签到天数: 21 天

    [LV.4]偶尔看看III

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

    [LV.9]以坛为家II

    发表于 2018-12-1 12:02:28 | 显示全部楼层
    1. 元素选择器
    2.群组选择器
    3.类选择器
    4.ID选择器
    5.后代选择器
  • TA的每日心情
    奋斗
    昨天 08:44
  • 签到天数: 199 天

    [LV.7]常住居民III

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

    [LV.4]偶尔看看III

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

    [LV.4]偶尔看看III

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

    [LV.4]偶尔看看III

    发表于 2018-12-2 10:38:16 | 显示全部楼层
    您需要登录后才可以回帖 登录 | 马上注册

    本版积分规则

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

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

    © 2017-2018

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