子代选择器
作用: 选中指定元素中, 符合要求的子元素 (儿子元素). (先写父 再写子元素)
子代选择器又称为: 子元素选择器, 子选择器
语法: 选择器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;
}
注意:
- 子选择器最终选择的是子,而不是父
- 子,孙子,重重孙子...... 统称后代! 子就是儿子的意思
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;
}