Css之选择器

一、基本选择器

      1、标签选择器，例如 

span {
  width: auto;
}

     2、类选择器，例如

<div class="container">容器</div>

.container {
  width: 2rem;
  height: 2rem;
  background: #989898;
}

    3、id选择器，例如

<div id="container">容器</div>

#container {
  width: 2rem;
  height: 2rem;
  background: #989898;
}

 4、通配符选择器，html所有元素都需要定义相同的样式， 例如

* {
  margin: 0;
  padding: 0;
}

二、组合选择器

   1、包含选择器。前面的一个选择器表示包含框对象的选择器，后面的选择器表示被包含的选择器。例如

/* 类选择器container下的子子孙孙的标签选择器span的字体大小都是0.14rem */
.container {
  span {
    font-size: 0.14rem;
  }
}

  2、子选择器。子选择器是指定父元素所包含的子元素。子选择器使用尖角号（>）表示，例如

/* 类选择器container下的子标签选择器span的字体大小是0.14rem */
.container {
  > span {
    font-size: 0.14rem;
  }
}

  3、相邻选择器。通过加号（+）分隔符进行定义。其基本结构是第一个选择器指定前面相邻元素，后面的选择器指定相邻元素。前后选择符的关系是兄弟关系，前兄后弟。例如

h1 + h2 {
  color: red;
  font-weight: bord;
}

  4、兄弟选择器。通过波浪符号（~）分隔符进行定义。其基本结构是第一个选择器指定同级前置元素，后面的选择器指定其后同级所有匹配元素。前后选择符的关系是兄弟关系，前兄后弟。例如

h1 ~ h5 {
  color: red;
  font-weight: bord;
}

  5、分组选择器。通过逗号（，）分隔符进行定义。实现集体声明，将样式表中一致的css样式放在一起，减少代码的书写量。例如

.container1,
.container2 {
  width: 2rem;
  height: 2rem;
  background: #989898;
}

三、属性选择器

 1、ele[attribute]，只使用了属性名，但没有确定任何属性值。例如

/* 选择类选择器nav下所有带有id属性的a元素，并在这个元素上使用蓝色背景 */
.nav a[id] {
  background: blue;
}

2、ele[attribute=“value”]，使用了属性名，也确定了属性值。例如

/* 选择类选择器nav下带有id属性且属性值是1的a元素，在这个元素上使用蓝色背景 */
.nav a[id='1'] {
  background: blue;
}

3、ele[attribute~=“value”]，选择元素attribute属性，只要属性值有一个value相匹配就可以选中该元素。例如

/* 选择类选择器nav下带有id属性且属性值包含1的所有a元素，在这个元素上使用蓝色背景 */
.nav a[id~='1'] {
  background: blue;
}

4、ele[attribute^=“value”]，选择元素attribute属性，并且它的属性值是以value开头。例如

/* 选择类选择器nav下带有id属性且属性值以1开头的所有a元素，在这个元素上使用蓝色背景 */
.nav a[id^='1'] {
  background: blue;
}

5、ele[attribute$=“value”]，选择元素attribute属性，并且它的属性值是以value结尾。例如

/* 选择类选择器nav下带有href属性且属性值以png值结尾的所有a元素，在这个元素上使用蓝色背景 */
.nav a[href$='png'] {
  background: blue;
}