CSS 选择器的几种方法
- 业余选手爱记笔记
- 示例代码
- 用否定伪类+伪元素
- 用代数式法
- 同胞选择符 ~
- 相邻同胞选择符 +
业余选手爱记笔记
CSS权威指南（第四版）是一本好书，看了一遍第二章的选择符有些受益，记录一点读后感和练习。我已将该书电子版的PDF书签整理完善，供大家下载：
CSS权威指南中文第四版 PDF电子版下载详见 https://download.csdn.net
示例代码
在多个按钮之间，加一个竖向管道 | 分隔符，按钮的个数是变化的，示例图如下，现在需要将第 2 到第 n 个按钮前加左边框，用 css 选择器有哪几种方法？
html 示例代码：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器练习</title>
<style>
#nav>li { width: 100px; display: inline-block; text-align: center; }
#nav>li>a { text-decoration: none; color: inherit; }
#nav>li>a:hover, #nav>li>a:focus { color: #f30327; font-weight: 700; }
</style>
</head>
<body>
<p>示例：在按钮之间添加一个分隔符</p>
<ul id="nav">
<li id="btn1"><a href="#mon">张三</a></li>
<li id="btn2"><a href="#tues">李四</a></li>
<li id="btn3"><a href="#wen">王麻子</a></li>
</ul>
</body>
</html>
用否定伪类+伪元素
- 不选择 ul 的第一个子代，用伪元素 :first-child
li:not(li:first-child) {border-left: 1px solid #ccc;}
- 不选择 ul 的第一个子代，用伪元素 :nth-child(1)，指定第1个li
li:not(li:nth-child(1)) {border-left: 1px solid #ccc;}
- 不选择 id 为 btn1 的 li，需要标记列表 id
li:not(#btn1) {border-left: 1px solid #ccc;}
用代数式法
- 选择 li 元素，并从第 2 个开始，n=0,1,2…
li:nth-child(n+2) {border-left: 1px solid #ccc;}
同胞选择符 ~
- 选择 id 为 btn1 的同胞元素，btn1 是第一个按钮，他的同胞就是其他按钮
#btn1~li {border-left: 1px solid #ccc;}
- 不用 id 选择器也可以，因为第一个按钮也是 li 元素，可以用如下写法
li~li {border-left: 1px solid #ccc;}
相邻同胞选择符 +
- 看起来和第6种方法很相似，但他们是有区别的，前一个 li 并不特指第一个按钮。如果你有怀疑，可以用 #btn1+li 选择符测试，结果只是在第 1 个和第 2 个按钮之间添加了分隔符
li+li {border-left: 1px solid #ccc;}
以上 7 种 CSS 选择器的写法均能实现相同效果，本人水平有限，可能还有其他方法。
