CSS选择器

注意：CSS选择器不宜嵌套过多，这样会影响样式加载性能。

1、CSS 元素选择器

说明：利用html页面 标签作为选择器，是最常见的css选择器

例如：p {font-size: 20px;}

2、CSS 类选择器

说明：使用一个clss作为选择器

例如：.person {color: rgb(0, 0, 0);}

2.1 CSS 多类选择器
说明：使用多个class作为选择器，选择出同时包含以上class类名的元素。

例如：.person.student {color: red;}

注意：多类选择器在书写的时候，多个类名直接不能有空格，不然就变成了后代选择器。

3、CSS属性选择器

说明：利用元素的属性及属性值来选择元素。

例如：*[title] {font-size: 20px;}         // 选择出包含title属性的所有元素;

          a[href][title] {font-size: 20px;} // 选择出包含href和title的所有a标签元素;

4、CSS后代选择器
说明：选择某元素的所有后代元素

例如：ul li {font-size: 20px;}

5、CSS子元素选择器

说明：比后代选择器选择范围小，使用“>”,选择某父元素的子元素。

例如：

<div>

  <p class="p1">

    <p class="p1-1"></p>

    <p class="p1-2"></p>

  </p>

  <p class="p2"></p> 

</div>

<style>

  div > p {color: red;} //选择出.p1, .p2两个元素;

</style>

6、CSS相邻兄弟选择器

说明：选择紧接其后的第一个满足条件的兄弟元素

例如：

<p>p1</p>
<span class="span1">span1</span><br />

<span class="span2">span2</span><br />

<style>

  p + span {color: red;} // 选择到.span1元素;

</style>

  <p class="p1"></p>

  <p class="p1"></p>