CSS学习笔记——CSS复合选择器1

CSS复合选择器

目录

• 后代选择器
• 子选择器
• 比较

后代选择器

选择器1 选择器2{
            color: #f00;
        }

• 什么是后代选择器？
  
  • 先找到选择器1，然后在选择器1下面去查找所有选择器2，并设置属性
• 注意点
  
  • 后代选择器必须使用空格隔开；
  • 后代不仅仅包括儿子，还包括孙子，曾孙等等；
  • 后代选择器可以无限嵌套

子选择器

选择器1>选择器2{
            color: #f00;
        }

• 什么是子选择器？
  
  • 先找到选择器1，然后在选择器1下面去查找直接子选择器2，并设置属性
• 注意点
  
  • 子选择器必须使用>隔开；
  • 子仅仅包括儿子，不会查找内部嵌套的选择器2；
  • 子选择器可以无限嵌套

比较

• 区别
  
  • 连接符不同，后代选择器是空格：" "，子选择器是大于符号">"
  • 后代选择器会选择所有的指定标签，包括儿子，孙子，重孙…，而自选择器只会选择儿子
• 共同点
  
  • 都可以复合使用id，class选择器
  • 可以通过各自的连接符号一直嵌套下去，子子孙孙无穷匮也