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;
}
相关推荐
PanZonghui6 分钟前
Vite 构建优化实战:从配置到落地的全方位性能提升指南
前端·react.js·vite
_extraordinary_29 分钟前
Java Linux --- 基本命令,部署Java web程序到线上访问
java·linux·前端
用户14567756103731 分钟前
推荐一个我私藏的电脑神器:小巧、无广、功能强到离谱
前端
用户14567756103732 分钟前
终于找到了!一个文件搞定PDF阅读
前端
liangshanbo121544 分钟前
React 18 的自动批处理
前端·javascript·react.js
一位搞嵌入式的 genius1 小时前
前端实战开发(二):React + Canvas 网络拓扑图开发:6 大核心问题与完整解决方案
前端·前端框架
da_vinci_x1 小时前
设计稿秒出“热力图”:AI预测式可用性测试工作流,上线前洞察用户行为
前端·人工智能·ui·设计模式·可用性测试·ux·设计师
訾博ZiBo1 小时前
UI架构的“定海神针”:掌握“视图无关状态提升”原则
前端
Keepreal4961 小时前
谈谈对XSS,CSRF,SQL注入,DoS和DDoS攻击的理解以及如何预防
前端·安全
sunbyte2 小时前
每日前端宝藏库 | tinykeys ✨
前端·javascript