css基础-选择器

选择器进阶


子串选择器

css 复制代码
/* 匹配 href 以 "https" 开头的链接 */
a[href^="https"] {
  color: green;
}

/* 匹配 href 包含 "example" 的链接 */
a[href*="example"] {
  text-decoration: underline;
}

/* 匹配 href 以 ".pdf" 结尾的链接 */
a[href$=".pdf"]::after {
  content: "📄";
}

伪类

  1. 状态伪类
css 复制代码
/* 未访问链接 */
a:link { color: blue; }

/* 已访问链接 */
a:visited { color: purple; }

/* 鼠标悬停 */
button:hover { background: #eee; }

/* 输入框获取焦点时 */
input:focus { outline: 2px solid orange; }
  1. 结构伪类
css 复制代码
/* 第一个子元素 */
ul li:first-child { font-weight: bold; }

/* 最后一个子元素 */
ul li:last-child { border-bottom: none; }

/* 第3个元素 */
ul li:nth-child(3) { color: red; }

/* 奇数行 */
tr:nth-child(odd) { background: #f5f5f5; }

伪元素

  1. ::before / ::after
css 复制代码
/* 在元素前插入内容 */
h1::before {
  content: "🌟";
  margin-right: 10px;
}

/* 在元素后插入内容 */
.price::after {
  content: "元";
  color: #999;
}
  1. ::selection
css 复制代码
/* 文本选中样式 */
::selection {
  background: yellow;
  color: black;
}

其他选择器

  1. 群组选择器
css 复制代码
/* 同时选择 h1-h3 */
h1, h2, h3 {
  font-family: Arial;
}
  1. 否定伪类
css 复制代码
/* 排除 .disabled 的按钮 */
button:not(.disabled) {
  cursor: pointer;
}
相关推荐
!执行12 小时前
Web3 前端与合约交互
前端·web3·1024程序员节
潘小安12 小时前
跟着 AI 学(二)- Quill 接入速通
前端
十里-12 小时前
在 Vue2 中为 Element-UI 的 el-dialog 添加拖拽功能
前端·vue.js·ui
shada12 小时前
从Google Chrome商店下载CRX文件
前端·chrome
左耳咚12 小时前
项目开发中从补码到精度丢失的陷阱
前端·javascript·面试
黑云压城After12 小时前
vue2实现图片自定义裁剪功能(uniapp)
java·前端·javascript
芙蓉王真的好112 小时前
NestJS API 提示信息规范:让日志与前端提示保持一致的方法
前端·状态模式
dwedwswd13 小时前
技术速递|从 0 到 1:用 Playwright MCP 搭配 GitHub Copilot 搭建 Web 应用调试环境
前端·github·copilot
2501_9387742913 小时前
Leaflet 弹出窗实现:Spring Boot 传递省级旅游口号信息的前端展示逻辑
前端·spring boot·旅游
meichaoWen13 小时前
【CSS】CSS 面试知多少
前端·css