结构选择器

CSS

• child::

  后代选择器

  • .marked p: 所有 class=“marked” 元素内的 p 元素

  1. 说明:

  1. 不管是儿子还是孙子(即儿子的儿子), 都在选择范围内
  2. 只能多选，不能单选

  指向原始笔记的链接

• child::

  儿子选择器

  h1 > span: 选择以hi为父标签的span标签

  1. 说明:

  1. .类名 > .类名也是可以的
  2. 同理, 其他选择器都可以使用子选择器
  3. 只会选择儿子, 而不会选择孙子(即儿子的儿子)
  4. 只能多选，不能单选

  指向原始笔记的链接

• child::

  父选择器

  适用范围:

  1. 已知子标签, 获取父标签, 逆向选取

  教程链接:

  CSS 的父选择器:has()_CSS, CSS选择器, 会员专栏 教程_W3cplus

  语法:

  举例说明:

  div:has(img)

  1. 选择含有img子标签的div标签

  指向原始笔记的链接

• child::

  位置选择器

  梗概

  • 针对目标在父元素中的第几个位置来选择

  选择器

  1. E:first-child 匹配父元素中的第一个子元素E
  2. E:last-child 匹配父元素中最后一个E元素
  3. E:nth-child(n) 匹配父元素中的第 n 个子元素E
  4. E:first-of-type 指定类型E的第一个
  5. E:last-of-type 指定类型E的最后一个
  6. E:nth-of-type(n) 指定类型E的第 n个

  1. 说明:

  1. 括号中可以填常数, 表示选择第几个
  2. 括号中也可以填关于n(必须是n)的表达式

  • 程序运行时自动给n依次赋值0, 1, 2, 3…
  • 然后每次都取表达式的结果, 作为选择第几个
  • 不需要父元素也能使用

  实例

  之一

  

  之一

  1. E:nth-of-type(2n), 则表达式的值依次为 0, 2, 4, 6…
     1. 依次选择第2个, 第4个, 第6个…
  2. E:nth-of-type(n+6), 则表达式的值依次为6, 7, 8…
     1. 依次选择第6个, 第7个…

  之一

  #box1 span:nth-child(1){
    /* css */
  }

  father:: 伪类选择器, 结构选择器

  指向原始笔记的链接

• child::

  兄弟选择器

  梗概:

  只能选择往后的兄弟, 不能选择往前的兄弟

  相邻兄弟选择器:

  a + b

  1. a后面相邻的b标签

  兄弟选择器:

  a ~ b

  1. a后面的所有b标签

  说明

  • 只能多选，不能单选

  指向原始笔记的链接