文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

CSS选择器之派生选择器

懒人大天才

懒人大天才

2024-04-23 22:52

关注

       在css里面,元素的定义是通过各种选择器来进行的。所以,选择器是CSS里面非常重要的一部分知识。根据不同的样式定义,CSS提供了不同类型的选择器。下文跟大家简单介绍一下其中的派生选择器。

CSS选择器之派生选择器_上下文选择器_派生选择器_后代选择器_编程学习网

  一、什么是派生选择器?

  派生选择器就是依据元素在其位置的上下文关系来定义样式。在CSS1中被称为上下文选择器。在CSS2中才被称为派生选择器。其作用依赖于上下文关系来应用或者避免某项规则,使标记更加简洁。在CSS3中,它又有了一个新的名字:后代选择器。

       为了方便阐述,本文把它称为派生选择器。

  二、语法解释

  在派生选择器中,规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符(combinator)。每个空格结合符可以解释为“……在……找到”、“……作为……的一部分”。

  三、派生选择器的应用

  假设你希望所有文字段落的所有链接都要变成红色。文字里面有5000个链接。你应该怎么解决?如果使用元素选择器你要定义5000次。但使用派生选择器就简洁得多了,你只需要这样书写规则即可:

  p a {

  color:red;

  }

  派生选择器主要要注意上下文的关系。

       请看下面这段代码:

举例代码

  猜猜看,运行效果是什么?

  答案很明显,就是只有“CSS样式”为斜体字。这是因为上文是把li元素中的stong元素内的文字样式定义为斜体,所以下文也就只有li元素中的strong元素能应用到该规则。

  派生选择器在由多个组成复杂但组合方式一致的元素结构中非常有用。我们不必再为这些元素多次引用同样的class,也不用再纠结这种情况如何规划。直接用元素选择器进行派生,既能有效减少html代码的字节数,又能提高编写效率,修改也更加方便,何乐而不为?

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     442人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     206人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     169人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     248人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     77人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯