使用 CSS 选择子元素

什么是CSS选择器

CSS选择器是指针对HTML文本中的某些元素，一种模式化的选择方式，这种方式不仅可以选择元素，还可以根据某些属性或属性值来选择元素。在将CSS样式应用到HTML元素时，选择器是非常重要的，因为可以根据选择器选择元素，将样式应用于被选择的元素。

CSS元素选择器

什么是元素选择器

元素选择器是CSS中最基本、最常用的选择器之一，基于元素的标签名选择特定的HTML元素。例如，下面的样式将设置元素的文本颜色为红色：

p{color:red;}

这个例子中，选择器 'p' 选中了所有的元素，并为选中的元素设置了红色的文本颜色。

元素选择器的用法

元素选择器的语法很简单：在样式表中输入元素的名称即可。

下面的例子将设置 HTML的所有h1元素的文本颜色为蓝色：

h1 {color:blue;}

还可以针对不同的元素设置不一样的样式：

h1 {color:red;}
p {color:blue;}

CSS选择子元素

什么是CSS选择子元素

CSS选择子元素是基于元素的子元素，即选择某一元素之下的子元素。使用选择子元素可以使CSS更加具有灵活性和可控性。

选择子元素的用法

在CSS中，通过>符号来选择元素的直接子元素，如下例：

div > p {
    color: red;
}

在上例中，样式适用于div中所有的子元素元素。

与直接选择器相同，如果你要选择所有类型的子元素，例如直接子元素、次级子元素等，只需要省略直接选择符号即可：

body p {
    color: red;
}

在上例中，样式适用于body中所有的子元素元素。

选择包含元素的子元素

CSS中还有另外一个很好用的选择器，它是包含选择器。例如， div p 选择器会选择 div 标记内的所有 p 标记，但是如果你还想选择p标签的直接子元素，该怎么做呢？ 这时，可以使用 div > p 这个选择器，这个选择器会选择div标记的直接子元素p标记，其他的p标记则不会被选择。

CSS选择包含元素的子元素，用包含选择器 ~ 选择器。

选择所有子元素

有的时候，你想选择一个元素及其所有的后代元素，这时就可以使用通配符（*）来选择它们。

div * {
    color: red;
}

在上例中，样式适用于 div 标记中的所有后代元素，包括 div 标记本身。

总结

CSS选择器是实现CSS样式动态应用于HTML元素的重要手段。选择子元素作为常用的CSS选择器之一，可以让我们更加方便的控制要应用样式的元素范围。此外，我们可以通过选择子元素来更好地控制元素的内部排版，达到视觉效果的完美展示。

同时，我们需要注意选择器的使用。选择器命令要遵循CSS的语法规范，一些命令中不能忽视空格，多重命令时要玩好命令的继承关系等等。对于不同的项目，我们要根据具体情况来选择使用哪些选择器。

正确使用CSS选择器，能够优化我们的项目代码，提高开发效率，是前端开发不可缺少的一部分。