文章目录

  • 后代选择器
  • 作用
  • 格式
  • 注意点
  • 子元素选择器
  • 作用
  • 格式
  • 注意点
  • 后代选择器和子元素选择器的异同
  • 区别
  • 共同点
  • 企业开发中如何选择


后代选择器

作用

找到指定标签的所有后代标签，然后设置属性。

格式

标签名称1 标签名称2{
	属性：值；
}

例如：

div p{
      color: red;
    }

含义：先找到名称叫做标签名称1的标签，然后再在这个标签下面去查找所有名称叫做标签名称2的标签，然后设置属性。

注意点

1.后代选择器必须用空格隔开；
2.后代不仅仅是儿子，也包括孙子/重孙子，只要最终是放在指定标签中的都是后代；
3.后代选择器不仅仅可以使用标签名称，还可以使用其他的选择器：
例如：

#identity p{
      color: red;
    }

子元素选择器

作用

找到指定标签中所有特定的直接子元素，然后设置属性。

格式

标签名称1>标签名称2{
属性：值；
}
含义：先找到名称叫做“标签名称1”的标签，然后在这个标签中查找所有直接子元素叫做“标签名称2”的元素。

注意点

1.子元素选择器只会查找儿子，不会查找其他被嵌套的标签；
2.子元素选择器之间需要用符号>连接，并且不能有空格；
3.子元素选择器不仅仅可以使用标签名称，还可以使用其他的选择器
例如：

.identity>p{
      color: red;
    }

4.子元素选择器可以通过>符号一直延续下去。

后代选择器和子元素选择器的异同

区别

1.后代选择器使用空格来作为连接符号；
子元素选择器使用符号>来作为连接符号。
2.后代选择器会选中指定标签中所有特定后代标签，也就是选中儿子、孙子…只要是被放到指定标签中的特定标签都会被选中；
子元素选择器只会选中指定标签中，所有的特定的直接标签，也就是只会选中特定的儿子标签。

共同点

1.后代选择器和子元素选择器都可以使用标签名称、id名称、类名称来作为选择器；
2.后代选择器和子元素选择器都可以通过各自的连接符号一直延续下去：
后代选择器：选择器1 选择器2 …{}
子元素选择器：选择器1>选择器2>…{}

企业开发中如何选择

如果想选中指定标签中的所有特定的标签，那么就使用后代选择器；如果只想选中指定标签中的所有特定儿子标签，那么就使用子元素选择器。