深入了解CSS选择器对元素样式的影响

一、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。