兄弟选择器(~)
用来查找指定元素的所有兄弟元素节点
h1 ~ p {
color: red;
}
<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
相邻兄弟选择器(+)
+选择紧接在元素后的元素，且二者有相同父元素。
h2+p {color: red;}
<p>这里是第一个p标签</p>
<h2>标题H2</h2>
<p>这里是第二个p标签</p>
<p>这里是第三个p标签</p>
li + li {color:red;}
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
首先分析选择器样式：li+li{}，字面意思是选取所有位于li标签后的第一个li元素
- 很显然第一个li不会被选中，因为它前面不是li
- 第二个li会被选中，因为它是第一个li标签紧邻的li标签
- 第三个li也会被选中，因为第三个li标签的上一个标签也是li标签，也满足li+li{}的条件：li标签后的第一个li标签
可以发现虽然这两个选择器都表示兄弟选择器，但是‘+’选择器则表示某元素后相邻的兄弟元素，也就是紧挨着的，是单个的（特殊情况：循环多个）。而‘~’选择器则表示某元素后所有同级的指定元素，强调所有的。
:first-child
<div id="win">
<div class="top"></div>
<div class="tab_con"></div>
<div class="tab_con"></div>
</div>
.tab_con:first-child{ background:#090; }
此时first-child不起作用。当看到.tab_con:first-child时，先找到父类，父类是win，然后，是找父类下第一个元素，并且这个元素的class是.tab_con，但是父类的第一个元素的class是top，所以不满足要求。
.tab_con:nth-child(2){ background:#090; }
首先找父类，然后找父类的第二个元素，并且要求第二个元素的class是tab_con，这里满足要求。
同样的道理，p:nth-child(n)：首先查找p元素的父级，然后找到这个父级的第n个子元素，刚好这个子元素是p标签，那么样式就会生效，如果这个子元素是div标签，那么样式不会生效。
:nth-of-type(n)
nth-of-type是取当前元素的兄弟元素，这个兄弟元素必须满足一个类型，比如都是p标签，然后从这些个p标签里面找第n个，下面来看看它和nth-child的区别：
p:nth-of-type(3) {
color: red;
}
p:nth-child(3) {
color: red;
}
<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
<p>这是第三个段落。</p>
<p>这是第四个段落。</p>
在这种情况下这两个选择器的效果都是一样的，如果我们在其中插入一个标签：
p:nth-of-type(3) {
color: red;
}
p:nth-child(3) {
color: blue;
}
<p>这是第一个段落。</p>
<h2>这是一个标题</h2>
<p>这是第二个段落。</p>
<p>这是第三个段落。</p>
<p>这是第四个段落。</p>
可以看到nth-of-type是先把所有的p标签筛选出来，然后从筛选出来的里面找到第三个；nth-child则不会筛选，直接找到第三个。
属性选择器
[title=hello] {
color: red;
}
<h2 title="hello">Hello world</h2>
几个常见的伪类选择器
- :checked: input:checked 选择每个被选中的 input 元素
- :focus: input:focus 选择获得焦点的 input 元素
面试题：如何美化checkbox?
- lable[for]和id：点击label的时候也能选中checkbox
- 隐藏checkbox这个元素：设置label的样式
- :checked + label：设置选中情况下的label的样式
