一、CSS选择器的基本概念
<style>
.example-class {
color: red;
}
#example-id {
color: blue;
}
</style>
<p class="example-class" id="example-id">我是例子文字</p>
CSS选择器是用于选取需要添加样式的元素的工具，通过选择器可以匹配元素的一些特征如id、class、元素名称等，从而对这些元素应用CSS样式。比如在上述示例中，我们定义了一个类选择器和一个id选择器，用于选取元素p。
在这个示例中，我们选取了具有class="example-class"和id="example-id"的p元素，并分别应用了不同的样式。需要注意的是，选择器的优先级是：id选择器 > 类选择器 > 元素选择器。因此，在这个示例中，应用的样式为blue，因为id选择器的优先级更高。
二、多种选择器的使用
<style>
div p {
color: red;
}
.example-class span {
color: blue;
}
.example-class .example-child {
color: green;
}
</style>
<div>
<p>我是红色文字</p>
<p><span class="example-child">这是蓝色文字</span></p>
</div>
<p class="example-class">这是蓝色文字 <span class="example-child">这是绿色文字</span></p>
同时使用多个选择器，可以更精确地选取元素进行样式的添加。在这个示例中，我们分别使用了后代选择器、类选择器、子选择器。需要注意的是，后代选择器和子选择器的区别在于：后代选择器选取的元素可以是后代元素中的任意一个，而子选择器只选取直接子元素。
对于前述代码中的第一个选择器，我们选取的是div内部的所有p元素。因此，两个p元素都被应用了这个样式。而第二个选择器是一个类选择器，通过选取class="example-class"的元素内部的所有span元素，并应用了蓝色样式。而第三个选择器则选取了类名为"example-class"的元素内部的任意一个class="example-child"的子元素，并应用了绿色样式。
三、伪类选择器的应用
<style>
a:link {
color: blue;
}
a:hover {
color: purple;
}
input:focus {
outline: none;
}
</style>
<a href="#">链接</a>
<input type="text">
伪类选择器是一种比较特殊的选择器，它选取的不是元素的特定属性，而是元素的状态。比如在这个示例中，我们选取了链接的link和hover状态，以及输入框的焦点状态。
对于a:link选择器，我们应用了蓝色样式，表示这是一个未访问的链接。而a:hover选择器则应用了紫色样式，表示当鼠标悬停在链接上时的状态。这两种状态在页面中经常被用到。另外，对于input:focus选择器，我们取消了输入框获取焦点时的默认边框，以达到更好的用户体验。
四、属性选择器的使用
<style>
img[src*="google"] {
display: none;
}
input[type="text"] {
background-color: #f6f6f6;
}
</style>
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
<input type="text">
属性选择器是一种通过元素属性来选择元素的方法。比如在这个示例中，我们使用属性选择器来选取图片和输入框。
对于第一个选择器，我们选取了src属性包含"google"字符的图片，并应用了样式display: none，表示隐藏这张图片。而对于第二个选择器，我们选取了type属性为"text"的输入框，并应用了背景色为#f6f6f6的样式，以达到更好的可读性。
五、选择器优先级的注意事项
<style>
#example-id {
color: blue;
}
.example-class {
color: green;
}
p {
color: red;
}
</style>
<p id="example-id" class="example-class">这是蓝色文字</p>
在使用多个选择器时，需要注意选择器的优先级问题。如果多个选择器对同一个元素应用了不同的样式，那么需要按照优先级的顺序进行判断。可以使用!important关键字来提高某个样式的优先级，但这并不是推荐的方法。
在这个示例中，我们使用了id选择器、类选择器和元素选择器来选取同一个元素，并为它分别应用了不同的样式。因为id选择器的优先级最高，所以应用的样式为blue。
