CSS 选择器的几种方法

CSS 选择器的几种方法

业余选手爱记笔记

CSS权威指南(第四版)是一本好书,看了一遍第二章的选择符有些受益,记录一点读后感和练习。我已将该书电子版的PDF书签整理完善,供大家下载:

CSS权威指南中文第四版 PDF电子版下载详见 https://download.csdn.net

示例代码

在多个按钮之间,加一个竖向管道 | 分隔符,按钮的个数是变化的,示例图如下,现在需要将第 2 到第 n 个按钮前加左边框,用 css 选择器有哪几种方法?

html 示例代码:

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>

用否定伪类+伪元素

  1. 不选择 ul 的第一个子代,用伪元素 :first-child
css 复制代码
li:not(li:first-child) {border-left: 1px solid #ccc;}
  1. 不选择 ul 的第一个子代,用伪元素 :nth-child(1),指定第1个li
css 复制代码
li:not(li:nth-child(1)) {border-left: 1px solid #ccc;}
  1. 不选择 id 为 btn1 的 li,需要标记列表 id
css 复制代码
li:not(#btn1) {border-left: 1px solid #ccc;}

用代数式法

  1. 选择 li 元素,并从第 2 个开始,n=0,1,2...
css 复制代码
li:nth-child(n+2) {border-left: 1px solid #ccc;}

同胞选择符 ~

  1. 选择 id 为 btn1 的同胞元素,btn1 是第一个按钮,他的同胞就是其他按钮
css 复制代码
#btn1~li {border-left: 1px solid #ccc;}
  1. 不用 id 选择器也可以,因为第一个按钮也是 li 元素,可以用如下写法
css 复制代码
li~li {border-left: 1px solid #ccc;}

相邻同胞选择符 +

  1. 看起来和第6种方法很相似,但他们是有区别的,前一个 li 并不特指第一个按钮。如果你有怀疑,可以用 #btn1+li 选择符测试,结果只是在第 1 个和第 2 个按钮之间添加了分隔符
css 复制代码
li+li {border-left: 1px solid #ccc;}

以上 7 种 CSS 选择器的写法均能实现相同效果,本人水平有限,可能还有其他方法。

相关推荐
IT_陈寒4 小时前
Spring Boot 3.2 新特性全解析:这5个性能优化点让你的应用提速50%!
前端·人工智能·后端
携欢4 小时前
PortSwigger靶场之Stored DOM XSS通关秘籍
前端·xss
LDM>W<5 小时前
Electron下载失败
前端·javascript·electron
EndingCoder5 小时前
Electron 新特性:2025 版本更新解读
前端·javascript·缓存·electron·前端框架·node.js·桌面端
BillKu5 小时前
Vue3 中使用 DOMPurify 对渲染动态 HTML 进行安全净化处理
前端·安全·html
子兮曰5 小时前
🔥深度解析:Nginx目录浏览美化与功能增强实战指南
前端·javascript·nginx
machinecat5 小时前
node,小程序合成音频的方式
前端·node.js
我是日安5 小时前
从零到一打造 Vue3 响应式系统 Day 4 - 核心概念:收集依赖、触发更新
前端·vue.js
跟橙姐学代码5 小时前
不要再用 print() 了!Python logging 库才是调试的终极武器
前端·python
ze_juejin5 小时前
JavaScript 中预防 XSS(跨站脚本攻击)
前端