CSS选择器之常规选择器、伪类与伪元素

用于演示的HTML代码结构

  <ul id="productlist" class="listbox">
    <li class="item">1</li>
    <li class="item">2</li>
    <li class="item">3</li>
    <li class="item">4</li>
    <li class="item">5</li>
    <li class="item">6</li>
    <li class="item">7</li>
    <li class="item">8</li>
    <li class="item">9</li>
  </ul>

常规选择器（简单选择器）

li { font-size: 20px; }
.listbox { background-color: #999; }
#productlist { background-color: red; }
#productlist.listbox { background-color: #00a700; }

以上选择器均可直接选中元素来改变样式。
常规选择器有标签选择器、类选择器、ID选择器等；
演示效果：

上下文选择器

.listbox li { color: #00a700 }
会选中 listbox 下面所有的<li>标签，注意是“所有”子孙<li>标签， 有下钻特征；

.listbox > li { color: #000000; }
只会选中 listbox 下面一个层级的<li>标签，即只选中“儿子”，不会选中“孙子”，无下钻特征；

相邻选择器

<ul id="productlist" class="listbox">
    <li class="item">1</li>
    <li class="item">2</li>
    <li class="item third">3</li>
    <li class="item">4</li>
    <li class="item">5</li>
    <li class="item">6</li>
    <li class="item">7</li>
    <li class="item">8</li>
    <li class="item">9</li>
  </ul>

.listbox .item.third + .item { background-color: red; }
会选中与.listbox .item.third 同级紧相邻的一个.item，即4会被选中；

.listbox .item.third ~ .item { background-color: red; }
会选中与.listbox .item.third 同级紧相邻的所有.item，即4、5、6、7、8、9都会被选中；

伪类选择器

.listbox > :first-child { background-color: red; }
.listbox :first-child { background-color: red; }
.listbox > .item:first-child { background-color: red; }
.listbox .item:first-child { background-color: red; }
这四种写法作用相同，都是表示将.listbox下的第一个子元素选中，即选中1 ；

同理，我们要选择.listbox 下最后一个元素，可以这样：
.listbox :last-child { background-color: red; }

按索引选择指定的某个元素，如下：

.listbox :nth-child(3) { background-color: red; }
.listbox :nth-child(4) { background-color: red; }
.listbox :nth-child(6) { background-color: red; }

按偶数选中：.listbox :nth-child(2n){ ... }
按偶数选中：.listbox :nth-child(even){ ... }
按奇数选中：.listbox :nth-child(2n - 1){ ... }
按奇数选中：.listbox :nth-child(odd){ ... }

从指定索引开始选中后面所有的元素：.listbox :nth-child(n + 6) { ... }
即6、7、8、9全部被选中。

分组伪类演示的HTML结构

<div class="listbox">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <p class="item">4</p>
    <div class="item">5</div>
    <p class="item">6</p>
    <div class="item">7</div>
    <p class="item">8</p>
    <div class="item">9</div>
  </div>

.listbox :last-of-type { background-color: red; }
选中.listbox下最后一个div和最后一个p标签；

.listbox :nth-of-type(2) { background-color: red; }
按.listbox下元素分组后每组的索引选中，即选中2、6

:target { ... }
当元素被点击指向时候（一般于href、button点击时）触发来改变样式；

:focus { ... }
当元素处于焦点时触发；如：input获得输入框焦点时；

.listbox > :not(.item:nth-of-type(2)){ ... }
把不满足条件的元素全部选中；

学习小结

常规选择器相对比较好理解，伪类选择器较为抽象，需要多观察HTML结构，多练习才能慢慢理解；