CSS选择器学习

一、简单选择器:一般是指id选择器，类选择器、元素选择器。

演示HTML代码：

    <div class="box" id="boxid">
      <div class="boxitem">1</div>
      <div class="boxitem">2</div>
      <div class="boxitem">3</div>
      <div class="boxitem">4</div>
      <div class="boxitem">5</div>
      <div class="boxitem">6</div>
      <div class="boxitem">7</div>
      <div class="boxitem">8</div>
      <div class="boxitem">9</div>
    </div>

简单选择器演示CSS样式文件：

* {
  padding: 0;
  margin: 0;
}
.box {
  width: 500px;
  background: linen;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
/* 简单选择器 */
/* id选择器 */
#boxid {
  background: lightcyan;
}
/* id+元素选择器 */
#boxid div {
  width: 150px;
  height: 150px;
  text-align: center;
  line-height: 150px;
  margin-bottom: 15px;
  background: lightgreen;/*绿色*/
  border: 1px solid lightgreen;
}
/* 类选择器比元素选择器优先级高，所以会覆盖上面样式的绿色背景颜色 */
#boxid .boxitem {
  background: lightpink;/*粉色*/
}

展示效果：

二、上下文选择器

/* 上下文选择器 */
/* 表示选择box类下所有类名称为boxitem的子类 */
.box .boxitem {
  background: lightyellow;
}
/* 加>表示只选择第一个子类 */
.box > .boxitem {
  background: lightskyblue;
}

二、相邻选择器(兄弟选择器）、同级选择器

    <div class="box" id="boxid">
      <div class="boxitem">1</div>
      <div class="boxitem">2</div>
      <div class="boxitem">3</div>
      <div class="boxitem">4</div>
      <div class="boxitem five_item">5</div>
      <div class="boxitem">6</div>
      <div class="boxitem">7</div>
      <div class="boxitem">8</div>
      <div class="boxitem">9</div>
    </div>

兄弟选择器、同级选择器样式

/*兄弟选择器*/
/* 如将第6个的背景色改为蓝色,兄弟选择器优先级小于子类选择器，所以要加important */
.box .boxitem.five_item + .boxitem {
  background: mediumblue !important;
}
/*同类选择器，~表示选中后面所有five_item后面所有含boxitem类的元素*/
.box .boxitem.five_item ~ .boxitem {
  background: red !important;
}

展示效果：

三、伪类选择器

.box:first-child：选择第一个子元素；

.box:last-child：选择最后一个子元素；

nth-child(n)：选择器选取父元素的第n个子元素，索引从1开始；

nth-child(n)：选择器选取父元素的第n个子元素；

.box .boxitem:nth-child(-n + 3)：选择前三个子元素；

.box .boxitem:nth-last-child(-n + 3)：选择后三个子元素；

.box .boxitem:nth-last-child(3)：从最后选，倒数第3个子元素；

nth-child(2n)或者nth-child(even)：选择器选取父元素的第n个偶数子元素；

nth-child(2n-1)或者nth-child(odd)：选择器选取父元素的第n个奇数子元素；

四、分组伪类

:last-of-type:表示分组后最后1个元素；

:nth-of-type（1）:表示分组后第1个元素；

:nth-of-type(-n + 2):表示分组后前2个元素；

:nth-last-of-type(-n + 2):表示分组后最后2个元素；

:focus：元素获取光标焦点时样式，一般用于输入框；

:before：元素之前插入内容选择器；

:after：元素之后插入内容选择器

:target：元素被点击指向url时触发来改变样式（a标签href、button点击时跳转url事件window.location.href(‘XXX’)）；

::not(selector) 选择器匹配非指定元素/选择器的每个元素，如

/*表示.box下排除span的子元素，其他子元素背景颜色设置为紫色*/
.box :not(span) {
  background: mediumpurple;
}

演示HTML代码

    <div class="box" id="boxid">
      <div class="boxitem">1</div>
      <div class="boxitem">2</div>
      <div class="boxitem">3</div>
      <div class="boxitem">4</div>
      <div class="boxitem five_item">5</div>
      <span class="boxitem">6</span>
      <span class="boxitem">7</span>
      <span class="boxitem">8</span>
      <span class="boxitem">9</span>
    </div>

分组伪类样式

/* .box下的子类.boxitem会根据元素类型div、span，分为2个类型 */
/* last-of-type表示分组后最后一个元素，所以第5个和第9个背景颜色会改变 */
.box .boxitem:last-of-type {
  background: mediumpurple;
}

展示效果：