首页 > 软件开发 > CSS >

CSS复合选择器的分类和用法

来源:互联网 2023-03-16 19:17:02 版权归原作者所有,如有侵权,请联系我们

CSS复合选择器有哪些呢,本篇文章将介绍他们的分类和用法nIj办公区 - 实用经验教程分享!

CSS复合选择器的分类和用法nIj办公区 - 实用经验教程分享!

工具/原料

  • 电脑

方法/步骤

  • 1

    后代选择器nIj办公区 - 实用经验教程分享!

    nIj办公区 - 实用经验教程分享!

    nIj办公区 - 实用经验教程分享!

    后代选择器的语法是用空格分隔的多个选择器组合,它的作用是在 A 选择器的后代元素中找到 B 选择器所指的元素。它的语法形式就是:“选择器 A 选择器 B” ,例如:nIj办公区 - 实用经验教程分享!

    CSS复合选择器的分类和用法nIj办公区 - 实用经验教程分享!

  • 2

    子元素选择器nIj办公区 - 实用经验教程分享!

    nIj办公区 - 实用经验教程分享!

    nIj办公区 - 实用经验教程分享!

    子元素选择器和后代选择器类似,也是为选择器限定范围。不同的是子元素选择器只找子元素,而不会把所有的后代都找一遍。它的语法是 “选择器 A> 选择器 B”,例如:nIj办公区 - 实用经验教程分享!

    CSS复合选择器的分类和用法nIj办公区 - 实用经验教程分享!

  • 2该信息未经许可获取自百度经验
  • 3

    相邻兄弟选择器nIj办公区 - 实用经验教程分享!

    nIj办公区 - 实用经验教程分享!

    nIj办公区 - 实用经验教程分享!

    相邻兄弟选择器是用来选取某个元素紧邻的兄弟元素,它的语法是 “选择器 A 选择器 B”,表示找到与 A 元素相邻的 B 元素。其实就是对选择器 B 加上 “紧邻着选择器 A” 的限制。一下面的代码为例:nIj办公区 - 实用经验教程分享!

    CSS复合选择器的分类和用法nIj办公区 - 实用经验教程分享!

  • 4

    通用兄弟选择器nIj办公区 - 实用经验教程分享!

    nIj办公区 - 实用经验教程分享!

    nIj办公区 - 实用经验教程分享!

    通用兄弟选择器和相邻兄弟选择器很相似,它的语法是 “选择器 A ~ 选择器 B”,也是用选择器 A 做限制,选择器 B 是最终匹配的目标。不同的是通用兄弟选择器会匹配选择器 A 指定元素后面的所有符合选择器 B 规则的元素。例如:nIj办公区 - 实用经验教程分享!

    CSS复合选择器的分类和用法nIj办公区 - 实用经验教程分享!

  • 5

    交集选择器nIj办公区 - 实用经验教程分享!

    nIj办公区 - 实用经验教程分享!

    nIj办公区 - 实用经验教程分享!

    交集选择器是为了找两个或多个选择器的交集,用法就是把两个选择器放在一起,形式如 “选择器 A 选择器 B”,中间不需要加空格或者其他符号。交集选择器最主要的作用是在限定范围内标识特殊的样式。比如:nIj办公区 - 实用经验教程分享!

    CSS复合选择器的分类和用法nIj办公区 - 实用经验教程分享!

  • 6

    并集选择器nIj办公区 - 实用经验教程分享!

    nIj办公区 - 实用经验教程分享!

    nIj办公区 - 实用经验教程分享!

    并集选择器是为了合并类似的样式,可以把选择器不同但样式相同的 CSS 语法块做合并。并集选择器就是用逗号分割多个选择器,形式如 “选择器 A, 选择器 B”,表示该样式对选择器 A 和选择器 B 所选择的元素都生效。例如:nIj办公区 - 实用经验教程分享!

    CSS复合选择器的分类和用法nIj办公区 - 实用经验教程分享!

  • 注意事项

    • 在学习选择器这一部分的时候,一定要自己建一些 DEMO 练一练,这么多的概念不动手试一试是不太容易记住的。

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!nIj办公区 - 实用经验教程分享!


    标签: CSS

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号