什么是CSS选择器
CSS选择器是指针对HTML文本中的某些元素，一种模式化的选择方式，这种方式不仅可以选择元素，还可以根据某些属性或属性值来选择元素。在将CSS样式应用到HTML元素时，选择器是非常重要的，因为可以根据选择器选择元素，将样式应用于被选择的元素。
CSS元素选择器
什么是元素选择器
元素选择器是CSS中最基本、最常用的选择器之一，基于元素的标签名选择特定的HTML元素。例如，下面的样式将设置元素的文本颜色为红色：
p{color:red;}
这个例子中，选择器 'p' 选中了所有的元素，并为选中的元素设置了红色的文本颜色。
元素选择器的用法
元素选择器的语法很简单：在样式表中输入元素的名称即可。
下面的例子将设置 HTML的所有h1元素的文本颜色为蓝色：
h1 {color:blue;}
<h1>元素，并设置它们的文本颜色为蓝色。如果你想改变其他元素的样式，只需要替换选择器名称就可以了。
还可以针对不同的元素设置不一样的样式：
h1 {color:red;}
p {color:blue;}
<h1>元素，并将它们的文本颜色设置为红色，'p' 选择器选中所有的元素并将它们的文本颜色设置为蓝色。
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选择器，能够优化我们的项目代码，提高开发效率，是前端开发不可缺少的一部分。