526互联

子代选择器

发布时间 2023-08-22 00:19:28作者: WangzaiTing

 作用: 选中指定元素中, 符合要求的子元素 (儿子元素). (先写父 再写子元素)

子代选择器又称为: 子元素选择器, 子选择器

 

语法:  选择器1>选择器2>选择器3>选择器n......

多个选择器通过大于号(>)隔开, 大于号(>)可以理解: xxx的子代, 其实就是儿子的意思

 

举例:

        div>a {
            color: red;
        }
        
        div>p>a {
            color: green;
        }
        /* div并且是.footer且后代是a标签的颜色文本为blue */
        
        div.footer>a {
            color: blue;
        }
        /* div的后代为.footer且后代是a标签的颜色文本为blue */
        
        div .footer>a {
            color: blue;
        }

 

 

注意:

  1. 子选择器最终选择的是子,而不是父
  2. 子,孙子,重重孙子...... 统称后代! 子就是儿子的意思
div>a {
color: red;
}
 
div>p>a {
color: green;
}
/* div并且是.footer且后代是a标签的颜色文本为blue */
 
div.footer>a {
color: blue;
}
/* div的后代为.footer且后代是a标签的颜色文本为blue */
 
div.footer>a {
color: blue;
}